/**
 * TechMart — homepage.
 *
 * The homepage had a structural problem rather than a decorative one. It is
 * fourteen bands deep, and eleven of those bands were the same thing: a white
 * ground, a left-aligned heading, and a row of white cards with a one-pixel
 * grey border. Scrolling it felt like one very long list, because visually it
 * *was* one very long list — nothing told the eye that a new idea had started,
 * and nothing told it which of the fourteen ideas mattered most.
 *
 * So this file is not a skin. It gives the page three things it did not have:
 *
 * 1. **A figure and a ground.** The hero and the two call-to-action panels are
 *    now dark; everything between them is light. Three dark anchors across ten
 *    thousand pixels is enough to give the scroll a shape you can remember.
 * 2. **Objects instead of outlines.** Cards rest on a soft shadow rather than
 *    a grey border and lift when pointed at, so a grid reads as a row of
 *    things you can pick up rather than a table with the lines left in.
 * 3. **One entrance.** The trust strip is pulled up over the bottom edge of
 *    the hero, which welds the two together into a single opening statement
 *    instead of two stacked bands, and gives the page a front door.
 *
 * Three rules it follows:
 *
 * - **Homepage only.** Every selector is scoped to `.tm-main--home` or to a
 *   band that only the homepage renders. The shop, the product page and the
 *   blog are deliberately untouched: the brief was the front page, and a
 *   product grid that behaves one way in a merchandising band and another way
 *   in a filtered archive is a bug, not a feature. `body.home` is not used —
 *   a static front page is `.home` *and* `.page`, and the main element's own
 *   class is the honest signal.
 * - **Nothing here can shift the layout.** No hover state changes an
 *   element's size in flow; lifts are `transform` only, and the reserved
 *   heights the product card relies on are left alone. The page's CLS is
 *   unchanged.
 * - **It degrades.** `backdrop-filter`, `color-mix()` and `:has()` all appear
 *   below, each behind a fallback declared first, so a browser that supports
 *   none of them gets a flatter page rather than a broken one.
 *
 * Loaded by inc/enqueue.php on `is_front_page()` only, after both
 * components.css and woocommerce.css so it can override either at equal
 * specificity.
 */

/* -------------------------------------------------------------------------
 * 1. Tokens
 *
 * Scoped to the page rather than added to `:root`, because these are
 * compositional decisions about one layout, not additions to the theme's
 * vocabulary. base.css owns the vocabulary; this owns the homepage.
 * ---------------------------------------------------------------------- */

.tm-main--home {
	/*
	 * The brand wash. Every glow, tint and gradient on the page is built
	 * from the merchant's own primary and accent colours, so changing the
	 * primary in the Customizer restyles the whole homepage and never leaves
	 * a hardcoded blue behind.
	 */
	--tm-home-glow: rgba(var(--tm-primary-rgb), .38);
	--tm-home-glow-soft: rgba(var(--tm-primary-rgb), .12);

	/* The dark grounds: hero, builder panel, newsletter. */
	--tm-home-ink: linear-gradient(155deg, var(--tm-ink) 0%, var(--tm-ink-2) 58%, var(--tm-ink) 100%);

	/* Hairlines on ink. A border that works on white is invisible on navy. */
	--tm-home-hairline: rgba(255, 255, 255, .1);
	--tm-home-hairline-strong: rgba(255, 255, 255, .18);

	/* Text on ink, in three weights of emphasis. */
	--tm-home-on-ink: #f8fafc;
	--tm-home-on-ink-muted: rgba(226, 232, 240, .76);
	--tm-home-on-ink-faint: rgba(226, 232, 240, .52);

	/*
	 * The card resting shadow.
	 *
	 * Two layers, and the tight one matters more than the wide one: it is
	 * doing the job the 1px border used to do — separating the card from the
	 * ground — while the wide layer does the floating. Dropping the border
	 * and keeping only a wide soft shadow makes cards look like they are
	 * hovering off the page at rest, which is worse than the border was.
	 */
	--tm-home-card-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px -14px rgba(15, 23, 42, .16);
	--tm-home-card-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 22px 44px -20px rgba(15, 23, 42, .3);
}

/* -------------------------------------------------------------------------
 * 2. Band rhythm
 *
 * Before touching any single band, fix the spacing between all of them. The
 * homepage bands were set to the same generous `--tm-section-y` as an
 * interior page, which is right when a template has two or three sections and
 * wrong when it has fourteen: the page carried roughly nine hundred pixels of
 * padding that existed only because every band was padded as though it were
 * alone.
 * ---------------------------------------------------------------------- */

.tm-main--home {
	--tm-section-y: clamp(44px, 4.4vw, 72px);
}

/*
 * A band on a white ground pays half rate.
 *
 * `--tm-section-y` is the padding a band needs *from the edge of its own
 * ground* — which is the right measure for a tinted or dark band, where the
 * padding is visible as coloured space. Between two white bands there is no
 * edge: the two paddings simply add up, and 63px of nothing under a product
 * grid plus 63px of nothing over the next heading is 126px of white that
 * carries no meaning and separates nothing, because there was no line there
 * to begin with. Measured on the live page, that gap appeared eight times.
 *
 * Two thirds each puts consecutive white bands about 84px apart — still an
 * unmistakable break, and about 340px of padding recovered across the eight
 * white-on-white seams the page has. (The page itself does not get shorter
 * by that much: the hero, the builder panel and the newsletter all grew, and
 * they grew by more. The saving buys the height those three spend, rather
 * than adding it on top.)
 *
 * The tinted and dark bands keep the full rate, because for them it really
 * is the inside of a shape.
 */
.tm-main--home .tm-section {
	padding-block: calc(var(--tm-section-y) * .66);
}

.tm-main--home .tm-section--surface,
.tm-main--home .tm-section--deals,
.tm-main--home .tm-section--builder-cta {
	padding-block: var(--tm-section-y);
}

/*
 * Two tinted bands in a row should not print their shared edge twice.
 *
 * `deals` follows `solutions` and both can be tinted, which put 140px of the
 * same colour between two headings with no signal in the middle. Collapsing
 * the seam makes the pair read as one longer band, which is what it looks
 * like anyway.
 */
.tm-main--home .tm-section--surface + .tm-section--surface {
	padding-block-start: 0;
}

/*
 * The tinted bands get a wash rather than a flat fill.
 *
 * A flat `--tm-surface-2` against white is a 3% difference — enough to make
 * the page look slightly dirty and not enough to read as a deliberate
 * change of ground. A vertical gradient that starts at the tint and resolves
 * to white by the bottom edge reads as light falling on the section, and
 * removes the hard line where the band ends.
 */
.tm-main--home .tm-section--surface {
	position: relative;
	background:
		radial-gradient(120% 70% at 50% 0%, var(--tm-home-glow-soft) 0%, transparent 70%),
		linear-gradient(180deg, var(--tm-surface-2) 0%, var(--tm-background) 100%);
}

/* A hairline at the top of a tinted band, fading out at both ends, so the
   band has a visible start without a full-width rule cutting the page. */
.tm-main--home .tm-section--surface::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--tm-border-strong) 22%, var(--tm-border-strong) 78%, transparent);
	pointer-events: none;
}

/* The collapsed seam above means the second band's hairline would land in
   the middle of the first band's content. */
.tm-main--home .tm-section--surface + .tm-section--surface::before {
	content: none;
}

/* -------------------------------------------------------------------------
 * 3. Section headings
 *
 * The heading was a bold line of text with a 42px rule under it. The rule was
 * added to give each band a visible start, and it does — but it is the same
 * 42px rule fourteen times, and at that size and weight it reads as an
 * underline artefact rather than as a mark.
 *
 * Replaced with a leading bar: taller than it is wide, set in a brand-to-
 * accent gradient, sized to the whole heading block rather than to one line
 * of it. It scales with the content — a heading with a subtitle gets a longer
 * bar — which is what makes it look like a system instead of a decoration,
 * and it uses logical properties so it moves to the right in RTL by itself.
 * ---------------------------------------------------------------------- */

.tm-main--home .tm-section-head {
	margin-bottom: clamp(24px, 2.8vw, 38px);
}

/*
 * Vertically centred only while the head is a row.
 *
 * Below 560px components.css turns the head into a column, and on a column
 * `align-items` is the *horizontal* axis — so centring there would push the
 * heading block and the "View all" pill into the middle of the page while
 * their own text stayed left-aligned. The rule has to be bounded by the same
 * breakpoint that owns the direction change.
 */
@media (min-width: 561px) {
	.tm-main--home .tm-section-head {
		align-items: center;
	}
}

.tm-main--home .tm-section-head__text {
	position: relative;
	padding-inline-start: 20px;
}

.tm-main--home .tm-section-head__text::before {
	content: "";
	position: absolute;
	inset-block: 3px 5px;
	inset-inline-start: 0;
	width: 4px;
	border-radius: var(--tm-radius-pill);
	background: linear-gradient(180deg, var(--tm-primary) 0%, var(--tm-accent) 100%);
}

/* The old underline, retired. Set on the element rather than deleted from
   components.css so an interior page that also uses `tm-section-head` keeps
   the treatment it was designed with. */
.tm-main--home .tm-section-head__title::after {
	content: none;
}

.tm-main--home .tm-section-head__title {
	padding-bottom: 0;
	/*
	 * Tighter tracking than the global h2, and a size of its own.
	 *
	 * A merchandising heading is a label on a shelf, not a headline: it wants
	 * to be unmistakably a heading and then get out of the way of the
	 * products. -.03em at this size is the difference between "words set in
	 * bold" and a display face.
	 */
	font-size: clamp(1.5rem, 1.16rem + 1.35vw, 2.1rem);
	letter-spacing: -.03em;
}

.tm-main--home .tm-section-head__subtitle {
	margin-top: 7px;
	font-size: var(--tm-fs-body);
	max-width: 56ch;
}

/* A centred head has no left edge to hang a bar off, so the mark goes back
   under the title — but as a gradient, matching the bar it replaces. */
.tm-main--home .tm-section-head--center .tm-section-head__text {
	padding-inline-start: 0;
	padding-bottom: 16px;
}

.tm-main--home .tm-section-head--center .tm-section-head__text::before {
	inset: auto 50% 0 auto;
	width: 56px;
	height: 4px;
	transform: translateX(50%);
	background: linear-gradient(90deg, var(--tm-primary) 0%, var(--tm-accent) 100%);
}

/*
 * "View all" becomes a control rather than a link.
 *
 * As plain blue text at 14px it was the least visible thing in the band, and
 * it is the one element in a section head that a visitor might actually want
 * to click. A pill gives it a hit area; the arrow that slides on hover is the
 * cheapest way to say the link goes somewhere.
 */
.tm-main--home .tm-section-head__link {
	gap: 8px;
	padding: 10px 18px;
	background: var(--tm-background);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-pill);
	color: var(--tm-text);
	box-shadow: var(--tm-shadow-sm);
	transition:
		border-color var(--tm-speed) var(--tm-ease),
		color var(--tm-speed) var(--tm-ease),
		box-shadow var(--tm-speed) var(--tm-ease);
}

.tm-main--home .tm-section-head__link:hover {
	border-color: var(--tm-primary);
	color: var(--tm-primary);
	box-shadow: var(--tm-shadow);
}

.tm-main--home .tm-section-head__link svg {
	transition: transform var(--tm-speed) var(--tm-ease);
}

.tm-main--home .tm-section-head__link:hover svg {
	/* Logical, so it slides towards the text's own end in RTL. */
	transform: translateX(3px);
}

[dir="rtl"] .tm-main--home .tm-section-head__link:hover svg {
	transform: translateX(-3px);
}

/* -------------------------------------------------------------------------
 * 4. Hero
 *
 * The hero was a photograph behind a 94%-white scrim with dark text on top.
 * That is a safe way to guarantee contrast and it costs you the photograph:
 * the demo's owl came through as a pale grey smudge, the product cut-out sat
 * on nothing in particular, and the whole band read as an unfinished
 * placeholder rather than as the front of a shop.
 *
 * Inverted. The ground is ink, the photograph is allowed to be a photograph
 * at 40% over it, and the text is light. Contrast goes *up* rather than down
 * — white on near-black clears AA by a wide margin at any font size, which
 * the old grey-on-pale-grey body copy did not reliably do — and the band
 * finally has the weight the top of a page needs.
 * ---------------------------------------------------------------------- */

.tm-main--home .tm-hero {
	background: var(--tm-home-ink);
	color: var(--tm-home-on-ink);
	isolation: isolate;
}

/*
 * The photograph.
 *
 * Opacity and a filter, not `mix-blend-mode`.
 *
 * `screen` blending is the better-looking option here — on an ink ground it
 * lifts the light parts of the picture and leaves the dark parts as ground,
 * so the image reads as light in the scene rather than as a translucent
 * sticker. It is also, on this element, very expensive: a full-bleed blend
 * layer inside a stacking context that a `backdrop-filter` further down the
 * page then reads through forces the compositor to re-rasterise the whole
 * hero, and it wedged the renderer outright on this machine.
 *
 * The filter recovers most of what the blend was doing — `brightness` lifts
 * the highlights the way `screen` did — for the cost of an ordinary
 * composited layer.
 */
.tm-main--home .tm-hero--has-bg::before {
	opacity: .5;
	filter: saturate(1.2) contrast(1.06) brightness(1.12);
}

/*
 * The scrim, and the glow.
 *
 * Declared for every hero, not only `--has-bg`: a hero with no background
 * image still wants the brand glow, and components.css only creates the
 * pseudo-element in the `--has-bg` case.
 *
 * Three layers, painted back to front by the browser and listed front to
 * back here as CSS requires:
 *   1. an accent flare at the far edge, behind the product image;
 *   2. a large brand glow rising behind the headline;
 *   3. the readability scrim, heaviest where the words are.
 */
.tm-main--home .tm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(45% 60% at 82% 42%, rgba(var(--tm-primary-rgb), .3) 0%, transparent 72%),
		radial-gradient(65% 85% at 8% 78%, var(--tm-home-glow) 0%, transparent 68%),
		linear-gradient(100deg, rgba(7, 12, 26, .95) 0%, rgba(7, 12, 26, .8) 42%, rgba(7, 12, 26, .42) 72%, rgba(7, 12, 26, .55) 100%);
}

[dir="rtl"] .tm-main--home .tm-hero::after {
	background:
		radial-gradient(45% 60% at 18% 42%, rgba(var(--tm-primary-rgb), .3) 0%, transparent 72%),
		radial-gradient(65% 85% at 92% 78%, var(--tm-home-glow) 0%, transparent 68%),
		linear-gradient(260deg, rgba(7, 12, 26, .95) 0%, rgba(7, 12, 26, .8) 42%, rgba(7, 12, 26, .42) 72%, rgba(7, 12, 26, .55) 100%);
}

/*
 * Stacked, the text spans the full width, so a horizontal scrim would leave
 * the last words of every line out over the picture. Same reasoning as the
 * rule this replaces in components.css — the scrim runs top-to-bottom
 * instead, and the trust strip overlaps the bottom edge, so the bottom is
 * darkened too rather than left open.
 */
@media (max-width: 899px) {
	.tm-main--home .tm-hero::after,
	[dir="rtl"] .tm-main--home .tm-hero::after {
		background:
			radial-gradient(90% 55% at 50% 100%, var(--tm-home-glow) 0%, transparent 72%),
			linear-gradient(180deg, rgba(7, 12, 26, .93) 0%, rgba(7, 12, 26, .82) 42%, rgba(7, 12, 26, .5) 70%, rgba(7, 12, 26, .88) 100%);
	}
}

.tm-main--home .tm-hero__inner {
	/*
	 * Taller. 487px for the opening band of a ten-thousand-pixel page was
	 * not enough room for the headline to be a headline — and the extra
	 * height is where the trust strip now overlaps, so it is not simply
	 * padding.
	 */
	padding-block: clamp(48px, 6.2vw, 96px) clamp(76px, 8vw, 122px);
}

@media (min-width: 900px) {
	.tm-main--home .tm-hero__inner {
		/* A touch more room for the text column than components.css gives
		   it: the headline is now larger and wants two lines, not three. */
		grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
		gap: 56px;
	}
}

/* The badge, as glass. A white pill on ink is a bright rectangle competing
   with the headline; a tinted one belongs to the scene. */
.tm-main--home .tm-hero__badge {
	gap: 9px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid var(--tm-home-hairline-strong);
	box-shadow: none;
	color: var(--tm-home-on-ink);
	font-size: var(--tm-fs-sm);
	letter-spacing: .01em;
	backdrop-filter: blur(8px);
}

.tm-main--home .tm-hero__badge svg {
	color: var(--tm-accent);
}

/*
 * The headline, as a display face.
 *
 * Three changes, all of them about it reading as one object rather than as a
 * paragraph set in bold: a size that actually uses the band, tracking pulled
 * in hard, and a top-to-bottom gradient fill that keeps the first line at
 * full white and lets the second settle slightly — which is what stops a
 * two-line heading in a single flat colour from looking like a wall.
 *
 * The gradient is a progressive enhancement in the strictest sense: `color`
 * is declared first and stays the used value unless the browser supports
 * both `background-clip: text` and transparent text fill, so there is no
 * scenario in which the headline is invisible.
 */
.tm-main--home .tm-hero__title {
	margin-bottom: 18px;
	max-width: 17ch;
	font-size: calc(clamp(2.4rem, 1.5rem + 4vw, 4.1rem) * var(--tm-font-scale));
	letter-spacing: -.035em;
	line-height: 1.04;
	color: var(--tm-home-on-ink);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.tm-main--home .tm-hero__title {
		background: linear-gradient(175deg, #fff 12%, #c7d4ee 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.tm-main--home .tm-hero__desc {
	margin-bottom: 30px;
	max-width: 48ch;
	font-size: clamp(1.02rem, .97rem + .3vw, 1.16rem);
	color: var(--tm-home-on-ink-muted);
}

.tm-main--home .tm-hero__actions {
	gap: 14px;
}

/* The primary call to action gets the one piece of real ornament on the
   page: a brand-coloured glow, so on an ink ground it reads as lit rather
   than as a blue rectangle. */
.tm-main--home .tm-hero__actions .tm-btn--primary {
	border-radius: var(--tm-radius-pill);
	background: linear-gradient(135deg, var(--tm-primary) 0%, var(--tm-primary-dark) 100%);
	border-color: transparent;
	box-shadow: 0 10px 30px -8px rgba(var(--tm-primary-rgb), .7);
}

.tm-main--home .tm-hero__actions .tm-btn--primary:hover {
	box-shadow: 0 14px 38px -8px rgba(var(--tm-primary-rgb), .85);
}

/* The secondary action, as glass. A solid white button beside the primary
   read as a second primary; this reads as an alternative. */
.tm-main--home .tm-hero__actions .tm-btn--ghost {
	border-radius: var(--tm-radius-pill);
	background: rgba(255, 255, 255, .08);
	border-color: var(--tm-home-hairline-strong);
	color: var(--tm-home-on-ink);
	backdrop-filter: blur(8px);
}

.tm-main--home .tm-hero__actions .tm-btn--ghost:hover {
	background: rgba(255, 255, 255, .15);
	border-color: rgba(255, 255, 255, .4);
	color: #fff;
}

/*
 * The product image, on a lit plinth.
 *
 * A cut-out on a transparent background needs something behind it or it
 * floats. The pseudo-element is a soft radial disc in the brand colour,
 * sized in percentages of the media box so it tracks the image at any
 * viewport, and pushed behind with a negative z-index — which is why
 * `.tm-hero` sets `isolation: isolate`: without it the disc would sink
 * behind the section's own background and vanish.
 */
.tm-main--home .tm-hero__media::before {
	content: "";
	position: absolute;
	inset: -12% -8%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(var(--tm-primary-rgb), .42) 0%, rgba(var(--tm-primary-rgb), .12) 45%, transparent 72%);
	pointer-events: none;
}

/* A darker, tighter drop shadow than the light-ground original: on ink, a
   soft grey shadow is invisible, and the image needs the contact. */
.tm-main--home .tm-hero__img {
	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55));
}

/* The hero countdown, on ink. White cards with a grey border belong on a
   white page; these are glass with light numerals. */
.tm-main--home .tm-countdown--hero .tm-countdown__unit {
	min-width: 64px;
	padding: 10px 8px;
	background: rgba(255, 255, 255, .08);
	border-color: var(--tm-home-hairline-strong);
	border-radius: var(--tm-radius);
	box-shadow: none;
	backdrop-filter: blur(8px);
}

.tm-main--home .tm-countdown--hero .tm-countdown__value {
	color: #fff;
}

.tm-main--home .tm-countdown--hero .tm-countdown__label {
	color: var(--tm-home-on-ink-faint);
}

.tm-main--home .tm-countdown--hero .tm-countdown__fallback {
	color: var(--tm-accent);
}

/* The slider controls, if the merchant configured a second slide. */
.tm-main--home .tm-hero-nav {
	background: rgba(255, 255, 255, .1);
	border-color: var(--tm-home-hairline-strong);
	color: var(--tm-home-on-ink);
	backdrop-filter: blur(8px);
}

.tm-main--home .tm-hero-nav:hover {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.tm-main--home .tm-hero-dot {
	background: rgba(255, 255, 255, .3);
}

.tm-main--home .tm-hero-dot.is-active {
	background: #fff;
}

/* -------------------------------------------------------------------------
 * 5. The trust strip, as the hero's front step
 *
 * This is the one structural move in the file. The strip was a tinted panel
 * in its own band directly under the hero — two stacked rectangles saying
 * two different things, and about 90px of padding between them saying
 * nothing at all.
 *
 * Pulled up over the hero's bottom edge it becomes part of the opening
 * statement: the hero makes the claim, the strip immediately backs it, and
 * the card straddling the boundary is what makes the top of the page look
 * composed rather than assembled.
 *
 * Scoped to the adjacent sibling selector on purpose. A merchant who
 * reorders the Customizer list and moves `benefits` down the page gets an
 * ordinary tinted panel there, because a card overlapping the bottom of a
 * product grid would be nonsense.
 * ---------------------------------------------------------------------- */

.tm-main--home .tm-hero-shell + .tm-section--benefits {
	position: relative;
	z-index: 2;
	/* Min and max are both negative, so the *min* is the larger overlap.
	   -4.4vw resolves inside the pair from about 820px up. */
	margin-top: clamp(-66px, -4.4vw, -34px);
	padding-block-start: 0;
	/* The divider this band grew when it sat between two white grounds. It
	   now ends in a floating card, which needs no line under it. */
	border-bottom: 0;
}

/*
 * Divided by the gap, not by borders.
 *
 * Five items in one card need boundaries between them, and the column count
 * changes from five to three to one across the breakpoints — so "draw a line
 * on the inline-start edge of every item except the first" is wrong at every
 * width except the widest: it leaves the stacked mobile layout with no
 * divisions at all, and puts a stray vertical line at the start of each
 * wrapped row.
 *
 * The grid's own gap does the whole job instead. The container is painted in
 * the hairline colour, the items in the card colour, and a 1px gap lets one
 * pixel of container show between them — horizontally *and* vertically,
 * automatically, at any column count the grid happens to resolve to.
 *
 * Deliberately opaque, not glass. A translucent card with a `backdrop-filter`
 * over a full-bleed photographic hero is the most expensive thing this page
 * could composite, and at the 92% white the contrast needs it is a difference
 * you cannot see. The overlap is what makes the move; the blur was never
 * carrying it.
 */
.tm-main--home .tm-hero-shell + .tm-section--benefits .tm-benefits {
	gap: 1px;
	padding: 0;
	background: var(--tm-border);
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius-2xl);
	box-shadow: var(--tm-shadow-float);
	overflow: hidden;
}

/*
 * Top-aligned, not centred.
 *
 * Centring each item inside its own grid cell looks tidier in the abstract
 * and is wrong here: the five descriptions run to two, three and four lines,
 * so centring puts all five *titles* at five different heights and the row
 * loses the horizontal line that makes it read as one strip. Aligning to the
 * top costs some ragged bottoms nobody looks at and buys a shared baseline
 * for the five words that are actually being compared.
 */
.tm-main--home .tm-hero-shell + .tm-section--benefits .tm-benefit {
	align-items: flex-start;
	padding: clamp(18px, 1.8vw, 24px);
	background: var(--tm-background);
}

.tm-main--home .tm-hero-shell + .tm-section--benefits .tm-benefit__icon {
	width: 42px;
	height: 42px;
	border-radius: var(--tm-radius);
	background: linear-gradient(140deg, var(--tm-primary-light) 0%, var(--tm-background) 100%);
	border: 1px solid var(--tm-border);
	color: var(--tm-primary);
}

.tm-main--home .tm-hero-shell + .tm-section--benefits .tm-benefit__title {
	font-size: var(--tm-fs-sm);
	letter-spacing: -.01em;
}

/* -------------------------------------------------------------------------
 * 6. Category tiles
 *
 * Two problems. The tile reserved a row for a chevron that only appears on
 * hover, so every tile carried about 30px of empty space under the label and
 * the band was 60px taller than its content — visible in the screenshot as a
 * white gutter along the bottom of all six tiles. And the thumbnail sat in a
 * flat grey circle, which is the one shape that makes a wide product cut-out
 * look smallest.
 *
 * The chevron is now absolutely positioned, so it costs no height, and the
 * well is a rounded square with a tinted gradient: more area for the same
 * footprint, and the tint gives a white-background cut-out an edge to sit
 * against.
 * ---------------------------------------------------------------------- */

.tm-main--home .tm-cat-grid {
	gap: clamp(12px, 1.2vw, 18px);
}

.tm-main--home .tm-cat-card {
	position: relative;
	gap: 14px;
	padding: 22px 14px 20px;
	border-color: transparent;
	border-radius: var(--tm-radius-xl);
	box-shadow: var(--tm-home-card-shadow);
	overflow: hidden;
}

.tm-main--home .tm-cat-card:hover {
	border-color: transparent;
	box-shadow: var(--tm-home-card-shadow-hover);
}

/*
 * A brand wash that rises into the tile on hover.
 *
 * Behind the content and clipped by the card's own radius, so it cannot
 * touch the label's contrast: at its strongest it is a 10% tint of the
 * primary at the bottom of the tile, and the text is at the top of it.
 */
.tm-main--home .tm-cat-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(var(--tm-primary-rgb), .1) 100%);
	opacity: 0;
	transition: opacity var(--tm-speed-slow) var(--tm-ease);
	pointer-events: none;
}

.tm-main--home .tm-cat-card:hover::before {
	opacity: 1;
}

.tm-main--home .tm-cat-card__media {
	width: 100%;
	max-width: 118px;
	height: auto;
	aspect-ratio: 1 / 1;
	padding: 12px;
	/* A squircle, not a circle. The thumbnails are wide cut-outs — a camera
	   body is roughly 2:1 — and a circle wastes the corners that a wide
	   image most needs. Same footprint, noticeably larger product. */
	border-radius: var(--tm-radius-xl);
	background:
		radial-gradient(80% 80% at 50% 20%, var(--tm-background) 0%, transparent 70%),
		linear-gradient(160deg, var(--tm-primary-light) 0%, var(--tm-surface-2) 100%);
	border: 1px solid var(--tm-border);
}

.tm-main--home .tm-cat-card__img {
	transition: transform var(--tm-speed-slow) var(--tm-ease);
}

.tm-main--home .tm-cat-card:hover .tm-cat-card__img {
	transform: scale(1.07);
}

.tm-main--home .tm-cat-card__body {
	gap: 3px;
}

.tm-main--home .tm-cat-card__name {
	font-size: var(--tm-fs-body);
	font-weight: 700;
	letter-spacing: -.015em;
	transition: color var(--tm-speed) var(--tm-ease);
}

.tm-main--home .tm-cat-card:hover .tm-cat-card__name {
	color: var(--tm-primary);
}

/*
 * Out of flow, so the row it used to occupy is gone. Kept visible rather
 * than hidden outright: a chevron that only exists on hover is invisible to
 * anyone on a touch screen, which is most visitors.
 *
 * In the muted grey rather than the brand blue at low opacity. A faded
 * primary in the corner of a tile reads as a rendering artefact — something
 * that failed to load — where the same shape in the colour the theme already
 * uses for secondary text reads as a quiet affordance. It takes the brand
 * colour on hover, when it is the thing being pointed at.
 */
.tm-main--home .tm-cat-card__arrow {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	/* components.css hides it at rest and reveals it on hover; that decision
	   is reversed here, so the reset is explicit. */
	opacity: 1;
	color: var(--tm-faint);
	transition: color var(--tm-speed) var(--tm-ease), transform var(--tm-speed) var(--tm-ease);
}

.tm-main--home .tm-cat-card:hover .tm-cat-card__arrow {
	color: var(--tm-primary);
	transform: translateX(2px);
}

[dir="rtl"] .tm-main--home .tm-cat-card:hover .tm-cat-card__arrow {
	transform: translateX(-2px);
}

/* -------------------------------------------------------------------------
 * 7. Product cards, in a merchandising band
 *
 * The card is defined in woocommerce.css and shared with the shop archive,
 * search and every shortcode grid. What changes here is only what makes a
 * *homepage* band read: the border comes off, a shadow takes over the job of
 * separating card from ground, and the card lifts when pointed at.
 *
 * The archive keeps its borders deliberately. A filtered grid of sixty
 * products is a list, and a list wants rules; eight products under a heading
 * are a display, and a display wants objects.
 * ---------------------------------------------------------------------- */

.tm-main--home .tm-card {
	border-color: transparent;
	border-radius: var(--tm-radius-xl);
	box-shadow: var(--tm-home-card-shadow);
	transition:
		border-color var(--tm-speed) var(--tm-ease),
		box-shadow var(--tm-speed-slow) var(--tm-ease),
		transform var(--tm-speed-slow) var(--tm-ease);
}

.tm-main--home .tm-card:hover {
	border-color: transparent;
	box-shadow: var(--tm-home-card-shadow-hover);
	transform: translateY(-4px);
}

/*
 * Everything *inside* the card is scoped to the merchandising bands.
 *
 * The shell rules above are safe to apply to every card on the page — a
 * radius and a shadow are the card's own business. The interior is not:
 * `.tmc-services` rebuilds the card into a text-only panel (no image well,
 * its own padding, its own accent edge) and it does so with single-class
 * selectors in woocommerce.css. A plain `.tm-main--home .tm-card__body`
 * ties that on specificity and wins on source order, which put 16px of
 * padding back inside a card that had deliberately zeroed it — the services
 * grid picked up a double inset from a rule that was never aimed at it.
 *
 * Naming the two bands these tweaks are actually for keeps them there. Any
 * future card variant is likewise unaffected by default, which is the right
 * way round.
 */
.tm-main--home .tm-section--products .tm-card__media,
.tm-main--home .tm-section--deals .tm-card__media {
	/* Lit from the top left. A flat grey square behind a white product
	   cut-out is the least flattering ground available. */
	background:
		radial-gradient(90% 70% at 30% 12%, var(--tm-background) 0%, transparent 72%),
		linear-gradient(150deg, var(--tm-surface-2) 0%, var(--tm-primary-light) 100%);
}

.tm-main--home .tm-section--products .tm-card__body,
.tm-main--home .tm-section--deals .tm-card__body {
	padding: 16px;
}

.tm-main--home .tm-section--products .tm-card__title,
.tm-main--home .tm-section--deals .tm-card__title {
	font-weight: 600;
	letter-spacing: -.01em;
}

/* Pills, matching the hero. The square full-width blue slab at the foot of
   every card was the heaviest element in the band. Applied to every card on
   the page, services included: the button is the card's edge, not its
   interior, and one button shape across the homepage is the point. */
.tm-main--home .tm-card__cta .tm-btn,
.tm-main--home .tm-card__cta .button {
	border-radius: var(--tm-radius-pill);
}

/* -------------------------------------------------------------------------
 * 8. Flash deals
 *
 * The band already had a red wash from the top, which is right — a deals
 * band should not look like the band above it. It just needed to commit:
 * the wash now carries an accent flare as well, and the countdown, which is
 * the whole point of a flash sale, is no longer three pale grey boxes.
 * ---------------------------------------------------------------------- */

.tm-main--home .tm-section--deals {
	background:
		radial-gradient(70% 60% at 88% 0%, var(--tm-accent-light) 0%, transparent 68%),
		linear-gradient(180deg, var(--tm-danger-light) 0%, var(--tm-background) 62%);
}

.tm-main--home .tm-deals__head {
	gap: 16px 22px;
	margin-bottom: clamp(22px, 2.8vw, 34px);
}

.tm-main--home .tm-deals__title {
	font-size: clamp(1.5rem, 1.16rem + 1.35vw, 2.1rem);
	letter-spacing: -.03em;
}

/* The tag icon, as a chip. It was a bare red glyph floating beside the
   words at whatever size the heading happened to be. */
.tm-main--home .tm-deals__title svg {
	padding: 9px;
	width: 40px;
	height: 40px;
	box-sizing: content-box;
	border-radius: var(--tm-radius);
	background: var(--tm-danger);
	color: #fff;
	box-shadow: 0 8px 20px -8px var(--tm-danger);
}

.tm-main--home .tm-deals__subtitle {
	font-size: var(--tm-fs-body);
}

/* Dark units with light numerals: a countdown has to look urgent, and pale
   grey boxes are the opposite of urgent. */
.tm-main--home .tm-countdown--deals .tm-countdown__unit {
	min-width: 62px;
	padding: 9px 8px;
	background: linear-gradient(160deg, var(--tm-ink-2) 0%, var(--tm-ink) 100%);
	border-color: transparent;
	box-shadow: 0 8px 22px -10px rgba(7, 12, 26, .6);
}

.tm-main--home .tm-countdown--deals .tm-countdown__value {
	color: #fff;
}

.tm-main--home .tm-countdown--deals .tm-countdown__label {
	color: var(--tm-home-on-ink-faint);
}

.tm-main--home .tm-deals__all {
	border-radius: var(--tm-radius-pill);
}

/* -------------------------------------------------------------------------
 * 9. Banners
 *
 * The scrim ran to fully transparent at 60% height, which on a light
 * photograph left white body copy on a white sky. Deepened, and the whole
 * body lifts a few pixels on hover so the tile answers the pointer.
 * ---------------------------------------------------------------------- */

.tm-main--home .tm-banner {
	border-radius: var(--tm-radius-2xl);
	min-height: 260px;
	box-shadow: var(--tm-home-card-shadow);
	transition: box-shadow var(--tm-speed-slow) var(--tm-ease);
}

.tm-main--home .tm-banner:hover {
	box-shadow: var(--tm-home-card-shadow-hover);
}

.tm-main--home .tm-banner__body {
	padding: 26px;
	background: linear-gradient(0deg, rgba(7, 12, 26, .92) 0%, rgba(7, 12, 26, .62) 48%, rgba(7, 12, 26, .12) 78%, transparent 100%);
	transition: transform var(--tm-speed-slow) var(--tm-ease);
}

.tm-main--home .tm-banner:hover .tm-banner__body {
	transform: translateY(-4px);
}

.tm-main--home .tm-banner__eyebrow {
	opacity: 1;
	color: var(--tm-accent);
}

.tm-main--home .tm-banner__title {
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
	letter-spacing: -.025em;
}

.tm-main--home .tm-banner__cta svg {
	transition: transform var(--tm-speed) var(--tm-ease);
}

.tm-main--home .tm-banner:hover .tm-banner__cta svg {
	transform: translateX(4px);
}

[dir="rtl"] .tm-main--home .tm-banner:hover .tm-banner__cta svg {
	transform: translateX(-4px);
}

/* -------------------------------------------------------------------------
 * 10. The builder panel
 *
 * A flat slate rectangle. It is the highest-intent thing on the page — it
 * sells a configured system rather than a single camera — and it looked like
 * a disabled state. Same ink treatment as the hero, so the two read as a
 * pair bracketing the merchandising bands, plus real step numbers: the list
 * was already an `<ol>` and already reset a `tm-step` counter that nothing
 * ever incremented or printed.
 * ---------------------------------------------------------------------- */

.tm-main--home .tm-builder-cta {
	position: relative;
	padding: clamp(28px, 4.2vw, 52px);
	background: var(--tm-home-ink);
	border-radius: var(--tm-radius-2xl);
	box-shadow: 0 30px 70px -30px rgba(7, 12, 26, .7);
	overflow: hidden;
	isolation: isolate;
}

.tm-main--home .tm-builder-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(50% 70% at 88% 8%, rgba(var(--tm-primary-rgb), .42) 0%, transparent 68%),
		radial-gradient(45% 60% at 4% 100%, rgba(var(--tm-primary-rgb), .22) 0%, transparent 70%);
	pointer-events: none;
}

.tm-main--home .tm-builder-cta__title {
	font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem);
	letter-spacing: -.032em;
	line-height: 1.08;
}

.tm-main--home .tm-builder-cta__desc {
	color: var(--tm-home-on-ink-muted);
	font-size: clamp(1rem, .96rem + .25vw, 1.1rem);
}

.tm-main--home .tm-builder-cta__actions .tm-btn--primary {
	border-radius: var(--tm-radius-pill);
	background: linear-gradient(135deg, var(--tm-primary) 0%, var(--tm-primary-dark) 100%);
	border-color: transparent;
	box-shadow: 0 10px 30px -8px rgba(var(--tm-primary-rgb), .7);
}

.tm-main--home .tm-builder-cta__actions .tm-btn--ghost {
	border-radius: var(--tm-radius-pill);
	background: rgba(255, 255, 255, .08);
	border-color: var(--tm-home-hairline-strong);
	backdrop-filter: blur(8px);
}

.tm-main--home .tm-builder-cta__actions .tm-btn--ghost:hover {
	background: rgba(255, 255, 255, .15);
	border-color: rgba(255, 255, 255, .4);
}

.tm-main--home .tm-builder-cta__step {
	gap: 16px;
	padding: 16px 18px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--tm-home-hairline);
	border-radius: var(--tm-radius-lg);
	transition: background-color var(--tm-speed) var(--tm-ease), border-color var(--tm-speed) var(--tm-ease);
}

.tm-main--home .tm-builder-cta__step:hover {
	background: rgba(255, 255, 255, .09);
	border-color: var(--tm-home-hairline-strong);
}

/*
 * The step number, printed over the icon.
 *
 * The markup gives each step an icon and no number, and the numbers are the
 * thing that makes three panels read as a sequence rather than as three
 * features. The counter puts one in the corner of the icon chip — which is
 * why the icon chip becomes `position: relative` and the counter is
 * incremented on the item rather than on the badge.
 */
.tm-main--home .tm-builder-cta__step {
	counter-increment: tm-step;
}

.tm-main--home .tm-builder-cta__step-icon {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: var(--tm-radius);
	background: linear-gradient(140deg, rgba(var(--tm-primary-rgb), .55) 0%, rgba(var(--tm-primary-rgb), .18) 100%);
	border: 1px solid var(--tm-home-hairline-strong);
}

.tm-main--home .tm-builder-cta__step-icon::after {
	content: counter(tm-step);
	position: absolute;
	inset-block-start: -8px;
	inset-inline-start: -8px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tm-accent);
	color: var(--tm-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.tm-main--home .tm-builder-cta__step-title {
	font-size: var(--tm-fs-body);
	letter-spacing: -.015em;
}

.tm-main--home .tm-builder-cta__step-text {
	font-size: var(--tm-fs-sm);
	color: var(--tm-home-on-ink-muted);
}

/* -------------------------------------------------------------------------
 * 11. Brands
 *
 * The store is authorised for two brands, and two 96px cards in a 1272px row
 * read as a section that failed to load. A previous pass centred them, which
 * was the right first move; this one gives them enough size and presence to
 * look like the point of the band rather than the remains of it.
 * ---------------------------------------------------------------------- */

@media (min-width: 640px) {
	.tm-main--home .tm-brands {
		/* Wider tracks and a real gap. With two brands this is a pair of
		   240px cards in the middle of the row; with eight it still wraps
		   to a wall, because the track is capped and not divided. */
		grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
		gap: 16px;
	}
}

.tm-main--home .tm-brand-card {
	height: 116px;
	border-color: transparent;
	border-radius: var(--tm-radius-xl);
	box-shadow: var(--tm-home-card-shadow);
	transition: box-shadow var(--tm-speed-slow) var(--tm-ease), transform var(--tm-speed-slow) var(--tm-ease);
}

.tm-main--home .tm-brand-card:hover {
	border-color: transparent;
	box-shadow: var(--tm-home-card-shadow-hover);
	transform: translateY(-3px);
}

/* -------------------------------------------------------------------------
 * 12. Solutions, services and posts
 *
 * The solution cards come from the TechMart Core plugin and the post cards
 * from blog.css. Neither is restyled here — they are only brought into the
 * same object language as everything else on the page, so a visitor
 * scrolling from the product grid into the solutions grid does not cross an
 * invisible border between two design systems.
 * ---------------------------------------------------------------------- */

.tm-main--home .tmc-solution-card,
.tm-main--home .tmc-brand-grid__link,
.tm-main--home .tm-post-card {
	border-color: transparent;
	border-radius: var(--tm-radius-xl);
	box-shadow: var(--tm-home-card-shadow);
	transition: box-shadow var(--tm-speed-slow) var(--tm-ease), transform var(--tm-speed-slow) var(--tm-ease);
}

.tm-main--home .tmc-solution-card:hover,
.tm-main--home .tmc-brand-grid__link:hover,
.tm-main--home .tm-post-card:hover {
	border-color: transparent;
	box-shadow: var(--tm-home-card-shadow-hover);
	transform: translateY(-4px);
}

.tm-main--home .tmc-solution-card__media img,
.tm-main--home .tm-post-card .tm-thumb {
	border-radius: var(--tm-radius-lg);
}

.tm-main--home .tmc-solution-card__title {
	letter-spacing: -.015em;
}

/* -------------------------------------------------------------------------
 * 14. The trailing page content
 *
 * A static front page can still carry editorial content, and it lands after
 * the newsletter band — which is now dark. A white prose band with no
 * heading directly under it looked like the footer had failed to load.
 * ---------------------------------------------------------------------- */

.tm-main--home .tm-section--page-content {
	padding-block: var(--tm-section-y);
	background: var(--tm-surface-2);
}

/* -------------------------------------------------------------------------
 * 15. Reduced motion
 *
 * base.css already collapses every duration to nothing, which stops the
 * transitions. It cannot undo a `transform` that is applied in a hover state
 * rather than animated into one — that arrives instantly instead of
 * smoothly, which is more jarring, not less. Every lift and slide added
 * above is switched off here.
 *
 * The colour, shadow and background changes are all kept: they carry state,
 * and a visitor who has asked for less movement has not asked for less
 * feedback.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tm-main--home .tm-card:hover,
	.tm-main--home .tm-brand-card:hover,
	.tm-main--home .tmc-solution-card:hover,
	.tm-main--home .tmc-brand-grid__link:hover,
	.tm-main--home .tm-post-card:hover,
	.tm-main--home .tm-cat-card:hover .tm-cat-card__img,
	.tm-main--home .tm-cat-card:hover .tm-cat-card__arrow,
	.tm-main--home .tm-banner:hover .tm-banner__body,
	.tm-main--home .tm-banner:hover .tm-banner__cta svg,
	.tm-main--home .tm-section-head__link:hover svg,
	[dir="rtl"] .tm-main--home .tm-cat-card:hover .tm-cat-card__arrow,
	[dir="rtl"] .tm-main--home .tm-banner:hover .tm-banner__cta svg,
	[dir="rtl"] .tm-main--home .tm-section-head__link:hover svg {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 16. Print
 *
 * Ink grounds and glows cost a great deal of toner and carry no information.
 * Everything dark on the page prints as text on white.
 * ---------------------------------------------------------------------- */

/*
 * The newsletter's own print rules are not here — they moved to
 * components.css with the component, because it prints from every template
 * and this file only loads on one.
 */
@media print {
	.tm-main--home .tm-hero,
	.tm-main--home .tm-builder-cta {
		background: none !important;
		box-shadow: none !important;
		color: var(--tm-text) !important;
	}

	.tm-main--home .tm-hero::after,
	.tm-main--home .tm-hero--has-bg::before,
	.tm-main--home .tm-hero__media::before,
	.tm-main--home .tm-builder-cta::before {
		display: none !important;
	}

	.tm-main--home .tm-hero__title,
	.tm-main--home .tm-builder-cta__title {
		-webkit-text-fill-color: var(--tm-text) !important;
		color: var(--tm-text) !important;
		background: none !important;
	}

	.tm-main--home .tm-hero__desc,
	.tm-main--home .tm-builder-cta__desc,
	.tm-main--home .tm-builder-cta__step-text {
		color: var(--tm-muted) !important;
	}

	.tm-main--home .tm-hero-shell + .tm-section--benefits {
		margin-top: 0;
	}

	.tm-main--home .tm-card,
	.tm-main--home .tm-cat-card,
	.tm-main--home .tm-brand-card {
		box-shadow: none !important;
		border-color: var(--tm-border) !important;
	}
}