/**
 * Time Attendance page — scoped styles
 *
 * Loaded by hifocus_ta_assets() on the single time-attendance-solutions
 * solution post only, with hifocus-main as its declared dependency.
 *
 * The page reuses main.css components wholesale — sw-hero, sw-crumbs, sw-band,
 * section-head, sw-module (the installation cards), product-showcase-grid,
 * marquee/brand-card, venue-grid/venue (the SHARED sector cards, section 13.1
 * of main.css, with its --light modifier), sw-faq and cta-panel. This sheet
 * adds only the patterns main.css has no equivalent for:
 *
 *   1. .ta-hero__grid      — hero graphic overlay, the sub line, the image slot
 *  1b. .ta-features       — the fifteen-item Key Features grid (light band)
 *   2. .ta-install-grid    — the eight installation cards (dark band)
 *   3. .ta-walk            — six-block software walkthrough, sync note, footnotes
 *   4. .ta-reports         — three sample report frames (dark band)
 *   5. .ta-terminals       — the four tested terminal cards
 *   6. .ta-equipment__more — the centred "browse all" action
 *   8. .ta-crosslink       — the credential/barrier/record panel
 *   9. .ta-process         — the four-step timeline (dark band)
 *  11. .ta-brochure        — the brochure panel above the closing CTA
 *  12. .ta-contact         — the contact grid inside the closing CTA
 *
 *   7. .ta-venue__pic      — only the <picture> wrapper inside the shared venue card
 *
 * Numbers follow the template's section comments; 10 (FAQ) is a shared
 * main.css component with nothing here.
 *
 * Every rule is scoped under .ta-page, so no other page is affected. All
 * colours, radii, spacing and easing come from the existing :root tokens.
 *
 * THE VENUE CARDS ARE NOT HERE. They are the shared .venue-grid / .venue
 * component in main.css; this page is its first light-band user, so the light
 * treatment went into main.css as .venue-grid--light rather than into this
 * sheet. Do not copy them here.
 *
 * ON THE DUPLICATION WITH access-control-solutions.css
 *
 * .ta-process, .ta-crosslink and .ta-contact restate .ac-*, .tg-*, .wifi-* and
 * .net-* shapes, for the reason every one of those sheets records: they are
 * scoped under another page's class and cannot be reached from here without
 * editing a sheet that serves a live page. Five pages now share them. Lifting
 * the common set into main.css is overdue, and should be done with all five
 * open, not as a side effect of adding this one.
 */

/* -------------------------------------------------- *
 * 1. Hero — graphic overlay, sub line and image slot
 *
 * Single column today: main.css collapses .sw-hero__inner through
 * :not(:has(.sw-hero__visual)), and the template prints that div only when
 * its attachment ID resolves. The .ta-hero__figure rules below are for that
 * day, so an ID is all it takes.
 *
 * The overlay motif is a timesheet ruling — fine verticals every 24px with a
 * stronger one every fifth, over wide horizontals — rather than the Access
 * Control door threshold or the CCTV technology grid.
 * -------------------------------------------------- */

.ta-page .ta-hero__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(90deg, rgba(34, 211, 238, 0.18) 1px, transparent 1px),
		linear-gradient(90deg, rgba(22, 102, 232, 0.08) 1px, transparent 1px),
		linear-gradient(0deg, rgba(22, 102, 232, 0.12) 1px, transparent 1px);
	background-size: 120px 100%, 24px 100%, 100% 96px;
	-webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(120% 85% at 50% 0%, #000 0%, transparent 72%);
	opacity: 0.5;
	pointer-events: none;
}

/*
 * The one-line promise under the H1. Brighter and heavier than the lead
 * paragraphs beneath it, so it reads as the answer to the heading and the
 * leads read as the detail.
 */
.ta-page .ta-hero__sub {
	max-width: 52ch;
	margin: var(--space-sm) 0 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(1.1rem, 1.9vw, 1.35rem);
	font-weight: 600;
	line-height: 1.45;
}

/* Two lead paragraphs: tighter than the gap under the sub line. */
.ta-page .sw-hero__lead + .sw-hero__lead {
	margin-top: var(--space-sm);
}

/* The brochure's supporting line, quieter than the leads above the buttons. */
.ta-page .ta-hero__brochure-note {
	max-width: 52ch;
	margin: var(--space-sm) 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
}

/* hifocus_icon() prints a bare SVG; .btn__icon sizes the span around it. */
.ta-page .ta-brochure-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ta-page .ta-hero__figure {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.ta-page .ta-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* -------------------------------------------------- *
 * 1b. Key features — light band
 *
 * Fifteen icon cells in one white card, split by hairlines. The hairlines are
 * each cell's right and bottom box-shadow; the card's overflow clips the ones
 * that fall on its outer edge, so no nth-child bookkeeping per breakpoint.
 *
 * FIVE TRACKS, stepping 5 -> 3 -> 1. Five and three divide fifteen. Cells
 * in a row stretch to the tallest, since descriptions vary in length. On
 * phones each item turns into a row: circle on the left, text on the right.
 *
 * Each cell is an icon, a label and a short description. The description is
 * not clamped, so no text can be hidden; the longest runs to three lines at
 * 1440 and 834, which the equal-height rows absorb.
 *
 * The five circle colours exist nowhere else in the theme, so they are
 * defined here as local properties. Each cell picks one with its --tone
 * modifier; the template orders them so neighbours never match.
 *
 * Heading and pill share a row that wraps: the title keeps the main.css
 * .section-head--left look, only its bottom margins are handed to the row.
 * -------------------------------------------------- */

.ta-page .ta-features__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
}

.ta-page .ta-features__head .section-head {
	max-width: none;
	margin-bottom: 0;
}

.ta-page .ta-features__head .section-head__title {
	margin-bottom: 0;
}

.ta-page .ta-features__pill {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(22, 102, 232, 0.22);
	border-radius: 999px;
	background-color: rgba(22, 102, 232, 0.08);
	color: var(--color-primary-dark);
	font-size: var(--fs-sm);
	font-weight: 600;
	line-height: 1.3;
}

.ta-page .ta-features__pill svg {
	flex: none;
	width: 16px;
	height: 16px;
	stroke-width: 2.2;
}

.ta-page .ta-features {
	--ta-blue: #1666e8;
	--ta-orange: #f97316;
	--ta-green: #16a34a;
	--ta-purple: #7c3aed;
	--ta-teal: #0d9488;

	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-bg);
	box-shadow: var(--shadow-md);
}

.ta-page .ta-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding: var(--space-md) var(--space-sm);
	text-align: center;
	box-shadow: 1px 0 0 var(--color-border), 0 1px 0 var(--color-border);
}

.ta-page .ta-feature--blue {
	--ta-tone: var(--ta-blue);
}

.ta-page .ta-feature--orange {
	--ta-tone: var(--ta-orange);
}

.ta-page .ta-feature--green {
	--ta-tone: var(--ta-green);
}

.ta-page .ta-feature--purple {
	--ta-tone: var(--ta-purple);
}

.ta-page .ta-feature--teal {
	--ta-tone: var(--ta-teal);
}

.ta-page .ta-feature__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--ta-tone, var(--ta-blue));
	color: #fff;
}

.ta-page .ta-feature__icon svg {
	width: 28px;
	height: 28px;
}

.ta-page .ta-feature__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
}

.ta-page .ta-feature__label {
	max-width: 13em;
	color: var(--color-text);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}

/* Same grey as the section leads (.section-head__lead). */
.ta-page .ta-feature__desc {
	max-width: 17em;
	color: var(--color-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	text-wrap: pretty;
}

/* -------------------------------------------------- *
 * 2. What our installation includes — dark band
 *
 * The cards are .sw-module from main.css. Only the grid is set here, plus
 * vertical centring: these cards carry a title and no description, so the
 * title sits level with its icon rather than hanging from the top edge.
 *
 * FOUR TRACKS, and the ladder has to divide eight at every step: 4 -> 2 -> 1.
 * A three-column step would leave two cards on a row of their own.
 * -------------------------------------------------- */

.ta-page .ta-install-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.ta-page .ta-install-grid .sw-module {
	align-items: center;
}

/* -------------------------------------------------- *
 * 3. Our own attendance software — light band
 *
 * Six walkthrough blocks, copy and screenshot side by side, alternating:
 * --flip swaps the columns by ORDER, not by DOM, so the reading order stays
 * heading -> text -> screenshot at every width. The copy column is the
 * narrower one (5fr against 7fr): the screenshots are wide app windows and
 * need the room to be legible.
 *
 * Block 3 carries two screenshots as an offset pair; the second overlaps the
 * lower right of the first. Stacked plainly on phones, where an overlap
 * would shrink the second shot below legibility.
 *
 * The screenshots are theme files printed as <picture> with explicit
 * width/height, so height: auto keeps their true ratio with no layout shift.
 * -------------------------------------------------- */

.ta-page .ta-walk {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
}

.ta-page .ta-walk__block {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: var(--space-lg);
}

.ta-page .ta-walk__block--flip {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.ta-page .ta-walk__block--flip .ta-walk__copy {
	order: 2;
}

.ta-page .ta-walk__num {
	display: inline-flex;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background-color: rgba(22, 102, 232, 0.08);
	color: var(--blue-500);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.ta-page .ta-walk__title {
	margin: 0.65rem 0 0.8rem;
	color: var(--color-text);
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.ta-page .ta-walk__text {
	max-width: 56ch;
	margin: 0 0 0.85rem;
	color: var(--color-muted);
	line-height: 1.7;
}

.ta-page .ta-walk__text:last-child {
	margin-bottom: 0;
}

.ta-page .ta-walk__list {
	display: grid;
	gap: 0.55rem;
	max-width: 56ch;
	margin: 0 0 0.85rem;
	padding: 0;
	list-style: none;
}

.ta-page .ta-walk__list li {
	position: relative;
	padding-left: 1.3rem;
	color: var(--color-muted);
	line-height: 1.6;
}

.ta-page .ta-walk__list li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-image: var(--gradient-brand);
}

.ta-page .ta-walk__list strong {
	color: var(--color-text);
}

.ta-page .ta-walk__shot {
	display: block;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-bg);
	box-shadow: 0 18px 48px rgba(16, 24, 40, 0.12);
}

.ta-page .ta-walk__shot img {
	display: block;
	width: 100%;
	height: auto;
}

.ta-page .ta-walk__media--pair {
	position: relative;
	padding: 0 12% 20% 0;
}

.ta-page .ta-walk__media--pair .ta-walk__shot + .ta-walk__shot {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 62%;
	box-shadow: 0 24px 60px rgba(16, 24, 40, 0.22);
}

/* The background-sync note: the one thing the software does unseen. */
.ta-page .ta-walk__sync {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	max-width: 52rem;
	margin: var(--space-xl) auto 0;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-bg);
	box-shadow: var(--shadow-sm);
}

.ta-page .ta-walk__sync p {
	margin: 0;
	color: var(--color-text);
	line-height: 1.65;
}

.ta-page .ta-walk__sync-icon,
.ta-page .ta-brochure__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 8px 22px rgba(22, 102, 232, 0.3);
}

.ta-page .ta-walk__sync-icon svg,
.ta-page .ta-brochure__icon svg {
	width: 24px;
	height: 24px;
}

/*
 * What the software does NOT do, and the line under the terminal cards.
 * Smaller and quieter than the content above, but never hidden: the first
 * is what stops a buyer expecting an HR system.
 */
.ta-page .ta-soft-foot {
	max-width: 70ch;
	margin: var(--space-lg) auto 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
	line-height: 1.65;
	text-align: center;
}

.ta-page .ta-soft-foot + .ta-soft-foot {
	margin-top: 0.35rem;
}

/* -------------------------------------------------- *
 * 4. What your payroll actually receives — dark band
 *
 * Three sample reports as white "paper" frames on navy. One frame ratio for
 * all three keeps the row level, although the Daily Attendance page is
 * portrait and the other two are landscape: the portrait page is cropped
 * from the top with a fade (it continues below, and the link opens it
 * whole), and the landscape ones are shown whole and centred. Each frame
 * links to the full-size JPEG, because at a third of the container these
 * are a preview, not a readable page.
 * -------------------------------------------------- */

.ta-page .ta-reports {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-md);
}

.ta-page .ta-report {
	margin: 0;
}

.ta-page .ta-report__frame {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	background-color: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.ta-page .ta-report__frame:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.ta-page .ta-report__frame:focus-visible {
	outline: 2px solid var(--cyan-400);
	outline-offset: 4px;
}

.ta-page .ta-report__pic {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.ta-page .ta-report__pic img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 0.5rem;
	object-fit: contain;
	object-position: center;
}

.ta-page .ta-report__pic--daily-attendance img {
	padding: 0;
	object-fit: cover;
	object-position: center top;
}

.ta-page .ta-report__pic--daily-attendance::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 28%;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 90%);
	pointer-events: none;
}

.ta-page .ta-report__caption {
	margin-top: 0.9rem;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.ta-page .ta-report__caption strong {
	color: var(--color-inverse);
}

/* -------------------------------------------------- *
 * 5. Terminals that work with our software — light band
 *
 * Four cards, FOUR TRACKS, 4 -> 2 (below 1280). Photo from the product's
 * featured image, contained on white because product cutouts vary in
 * framing. The model link stretches over the whole card through ::after. A
 * product that does not resolve gets the keypad icon in the photo slot.
 *
 * THE METHOD TAGS FIT ONE LINE at four-up: the widest card (Face,
 * Fingerprint, Card, PIN) measures ~236px against 250px of body on Windows,
 * which is why the pills are this small and the body's side padding is
 * 0.875rem. The slack is for system-ui on macOS, which sets wider than
 * Segoe UI; if a platform still overflows, the row wraps centred. Below
 * the full 1240px container a four-up card is too narrow for that, so the
 * grid goes two-up at 1279px rather than letting the tags wrap on laptops.
 * On phones they wrap, centred, which is fine.
 * -------------------------------------------------- */

.ta-page .ta-terminals {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-page .ta-terminal {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-bg);
	box-shadow: var(--shadow-sm);
	transition: transform 0.35s var(--ease-out), border-color var(--transition),
		box-shadow 0.35s var(--ease-out);
}

.ta-page .ta-terminal:hover {
	transform: translateY(-6px);
	border-color: rgba(22, 102, 232, 0.35);
	box-shadow: var(--shadow-md);
}

.ta-page .ta-terminal:has(.ta-terminal__link:focus-visible) {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

.ta-page .ta-terminal__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	aspect-ratio: 1 / 1;
	padding: var(--space-md);
	border-bottom: 1px solid var(--color-border);
	background-color: #fff;
}

.ta-page .ta-terminal__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ta-page .ta-terminal__figure--icon {
	background-color: var(--color-surface);
	color: rgba(22, 102, 232, 0.45);
}

.ta-page .ta-terminal__figure--icon svg {
	width: 72px;
	height: 72px;
}

.ta-page .ta-terminal__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: var(--space-md) 0.875rem;
	text-align: center;
}

.ta-page .ta-terminal__brand {
	margin: 0;
	color: var(--color-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ta-page .ta-terminal__model {
	margin: 0;
	color: var(--color-text);
	font-size: 1.15rem;
	font-weight: 700;
}

.ta-page .ta-terminal__link {
	color: inherit;
	text-decoration: none;
}

/* Stretched link: the whole card is the click target. */
.ta-page .ta-terminal__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ta-page .ta-terminal__link:hover {
	color: var(--color-primary);
}

/* The card carries the focus ring (above), so the link does not double it. */
.ta-page .ta-terminal__link:focus-visible {
	outline: none;
	color: var(--color-primary);
}

.ta-page .ta-terminal__methods {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.2rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ta-page .ta-terminal__methods li {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.22rem 0.35rem;
	border-radius: 999px;
	background-color: rgba(22, 102, 232, 0.08);
	color: var(--color-primary-dark);
	font-size: 0.7rem;
	font-weight: 600;
	white-space: nowrap;
}

/* Flex, so the template's whitespace around the SVG never renders as a space. */
.ta-page .ta-terminal__method-icon {
	display: flex;
}

.ta-page .ta-terminal__method-icon svg {
	display: block;
	width: 12px;
	height: 12px;
}

/* -------------------------------------------------- *
 * 6. Terminals we supply — closing action
 * -------------------------------------------------- */

.ta-page .ta-equipment__more {
	margin-top: var(--space-lg);
	text-align: center;
}

/* -------------------------------------------------- *
 * 7. Where attendance systems are used — venue photographs (illustrative)
 *
 * The cards are the shared .venue component (main.css 13.1): its 3/2
 * .venue__figure, cover-fit .venue__img and flex: 1 body already give equal
 * heights and aligned photos. The one gap is the <picture> element this page
 * wraps its images in: inline by default, it would stop .venue__img's
 * height: 100% from reaching the figure. Block + full height closes it.
 * -------------------------------------------------- */

.ta-page .ta-venue__pic {
	display: block;
	height: 100%;
}

/* -------------------------------------------------- *
 * 8. Cross-link panel — "The Record Completes the Story"
 *
 * Deliberately the same shape as .ac-crosslink and .tg-crosslink, so a visitor
 * moving between the three pages meets one pattern. The body carries the
 * three layers as a short list rather than a lead paragraph; the last one is
 * this page, and is set a shade stronger.
 * -------------------------------------------------- */

/*
 * flex-wrap, unlike .ac-crosslink: the three-line list needs more width than a
 * single lead paragraph, so between desktop and the 760px stack the buttons
 * drop to their own line (right-aligned) instead of crushing the list into a
 * one-word column behind them.
 */
.ta-page .ta-crosslink__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md) clamp(1.25rem, 3vw, 2rem);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(22, 102, 232, 0.22);
	background:
		radial-gradient(70% 160% at 0% 50%, rgba(34, 211, 238, 0.10) 0%, transparent 62%),
		var(--color-bg);
	box-shadow: var(--shadow-sm);
}

.ta-page .ta-crosslink__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: var(--radius-md);
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	box-shadow: 0 10px 26px rgba(22, 102, 232, 0.32);
}

.ta-page .ta-crosslink__icon svg {
	width: 27px;
	height: 27px;
}

/* 24rem is the narrowest the label column plus a line of text reads well at. */
.ta-page .ta-crosslink__body {
	flex: 1 1 24rem;
	min-width: 0;
}

.ta-page .ta-crosslink__title {
	margin: 0;
	color: var(--color-text);
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.ta-page .ta-crosslink__layers {
	display: grid;
	gap: 0.3rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.ta-page .ta-crosslink__layers li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	color: var(--color-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.ta-page .ta-crosslink__label {
	flex: 0 0 5.75rem;
	color: var(--color-primary);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.ta-page .ta-crosslink__layers li:last-child .ta-crosslink__text {
	color: var(--color-text);
	font-weight: 600;
}

/* margin-left: auto keeps the pair right-aligned when it wraps under the list. */
.ta-page .ta-crosslink__actions {
	display: flex;
	flex-shrink: 0;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-left: auto;
}

/*
 * .btn--ghost is the DARK-BACKGROUND ghost: white text on a translucent white
 * fill. This panel is white, where that button is close to invisible, so the
 * ghost here is restated in dark ink with a visible border. Scoped to this
 * panel only; every other .btn--ghost on the page sits on navy and keeps the
 * main.css treatment.
 */
.ta-page .ta-crosslink__actions .btn--ghost {
	border-color: var(--color-border);
	background-color: var(--color-bg);
	color: var(--color-text);
	backdrop-filter: none;
}

.ta-page .ta-crosslink__actions .btn--ghost:hover,
.ta-page .ta-crosslink__actions .btn--ghost:focus-visible {
	border-color: var(--color-primary);
	background-color: var(--color-bg);
	color: var(--color-primary);
}

/* -------------------------------------------------- *
 * 9. Process — four-step timeline on the dark band
 *
 * The rules are lifted from .ac-process with the prefix changed: same
 * geometry, same four-step shape. The COPY is not shared -- the template's
 * process steps are attendance-specific and diverge from Access Control
 * deliberately. Keep the two sheets' shapes in step, not the wording.
 * -------------------------------------------------- */

.ta-page .ta-process {
	--pgap: clamp(1rem, 2.5vw, 1.75rem);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pgap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ta-page .ta-process__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 0.5rem;
	text-align: center;
}

/*
 * Connector: a gradient hairline from this step's badge centre to the next.
 * The badge is 52px, so its centre sits 0.5rem + 26px below the step top. The
 * last step drops it.
 */
.ta-page .ta-process__step::before {
	content: "";
	position: absolute;
	top: calc(0.5rem + 26px);
	left: 50%;
	z-index: 0;
	width: calc(100% + var(--pgap));
	height: 2px;
	background: linear-gradient(90deg, rgba(34, 211, 238, 0.55), rgba(34, 211, 238, 0.12));
}

.ta-page .ta-process__step:last-child::before {
	display: none;
}

.ta-page .ta-process__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background-image: var(--gradient-brand);
	color: var(--color-inverse);
	font-size: 1rem;
	font-weight: 800;
	box-shadow: 0 8px 24px rgba(22, 102, 232, 0.4);
}

.ta-page .ta-process__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: 1rem;
	border-radius: 14px;
	background-color: rgba(34, 211, 238, 0.1);
	color: var(--cyan-400);
}

.ta-page .ta-process__icon svg {
	width: 22px;
	height: 22px;
}

.ta-page .ta-process__title {
	margin: 0.9rem 0 0;
	color: var(--color-inverse);
	font-size: 1.05rem;
	font-weight: 700;
}

.ta-page .ta-process__desc {
	max-width: 26ch;
	margin: 0.4rem 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

/* -------------------------------------------------- *
 * 11. Brochure panel — above the closing CTA
 *
 * No bottom padding: the CTA section below brings its own top spacing, so
 * the panel reads as the lead-in to it rather than a section of its own.
 * -------------------------------------------------- */

.ta-page .ta-brochure {
	padding-bottom: 0;
}

.ta-page .ta-brochure__panel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
	max-width: 60rem;
	margin-inline: auto;
	padding: var(--space-md) var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	background-color: var(--color-surface);
}

.ta-page .ta-brochure__note {
	flex: 1 1 18rem;
	margin: 0;
	color: var(--color-text);
	font-weight: 500;
	line-height: 1.55;
}

/* -------------------------------------------------- *
 * 12. Contact grid inside the closing CTA
 * -------------------------------------------------- */

/* The service-area line under the lead: a quiet pill, not a warning. */
.ta-page .ta-contact__note {
	width: fit-content;
	margin: var(--space-sm) auto 0;
	padding: 0.3rem 0.9rem;
	border-radius: 999px;
	border: 1px solid rgba(34, 211, 238, 0.35);
	background-color: rgba(34, 211, 238, 0.08);
	color: var(--cyan-300);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.ta-page .ta-contact {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
	margin-top: var(--space-lg);
	text-align: left;
}

.ta-page .ta-contact__card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: var(--space-md);
	border-radius: var(--radius-lg);
	border: 1px solid rgba(120, 170, 255, 0.18);
	background-color: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform 0.35s var(--ease-out), border-color var(--transition),
		background-color var(--transition);
}

.ta-page .ta-contact__card:hover {
	transform: translateY(-6px);
	border-color: rgba(34, 211, 238, 0.5);
	background-color: rgba(255, 255, 255, 0.08);
}

.ta-page .ta-contact__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 0.35rem;
	border-radius: 12px;
	background-color: rgba(34, 211, 238, 0.12);
	color: var(--cyan-400);
}

.ta-page .ta-contact__icon svg {
	width: 20px;
	height: 20px;
}

.ta-page .ta-contact__label {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ta-page .ta-contact__value {
	margin: 0;
	color: var(--color-inverse);
	font-size: 0.98rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.ta-page .ta-contact__value a {
	color: var(--color-inverse);
}

.ta-page .ta-contact__value a:hover,
.ta-page .ta-contact__value a:focus-visible {
	color: var(--cyan-300);
}

/* -------------------------------------------------- *
 * Motion + responsive
 *
 * Breakpoints: 1080 / 1024 / 860 / 760 / 620 / 600 / 520. The product showcase grid
 * and the venue grid carry their own ladders in main.css; the steps here are
 * the ones this sheet's own grids need.
 * -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ta-page .ta-terminal:hover,
	.ta-page .ta-report__frame:hover,
	.ta-page .ta-contact__card:hover {
		transform: none;
	}
}

/*
 * Laptop, first step: the installation cards halve. Four title-only cards
 * across a 1080px container leave each title three words wide. Two divides
 * eight, so no card is stranded.
 */
@media (max-width: 1080px) {
	.ta-page .ta-install-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Below the full container the terminal cards go two-up (see section 5), and
 * with the room that gives, the method tags step back up a size.
 */
@media (max-width: 1279px) {
	.ta-page .ta-terminals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ta-page .ta-terminal__methods {
		gap: 0.4rem;
	}

	.ta-page .ta-terminal__methods li {
		gap: 0.3rem;
		padding: 0.28rem 0.6rem;
		font-size: 0.78rem;
	}

	.ta-page .ta-terminal__method-icon svg {
		width: 14px;
		height: 14px;
	}
}

/* Laptop: the contact grid halves, and the key features go three-up. */
@media (max-width: 1024px) {
	.ta-page .ta-contact {
		grid-template-columns: repeat(2, 1fr);
	}

	.ta-page .ta-features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Tablet: each walkthrough block stacks, copy then screenshot whichever side
 * it sat on, and the process timeline goes vertical.
 */
@media (max-width: 860px) {
	.ta-page .ta-walk__block,
	.ta-page .ta-walk__block--flip {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.ta-page .ta-walk__block--flip .ta-walk__copy {
		order: 0;
	}

	.ta-page .ta-process {
		grid-template-columns: 1fr;
		max-width: 30rem;
		margin-inline: auto;
		gap: var(--space-md);
	}

	/* Vertical stack: the horizontal connector no longer applies. */
	.ta-page .ta-process__step::before {
		display: none;
	}

	.ta-page .ta-process__desc {
		max-width: 40ch;
	}
}

@media (max-width: 760px) {
	/* The three report frames stack; a third of a phone is not a preview. */
	.ta-page .ta-reports {
		grid-template-columns: 1fr;
		max-width: 34rem;
		margin-inline: auto;
		gap: var(--space-lg);
	}

	.ta-page .ta-crosslink__panel {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* In a column the 24rem basis would become a 24rem HEIGHT. */
	.ta-page .ta-crosslink__body {
		flex-basis: auto;
	}

	/* Centred, the fixed label column would push each line off-axis. */
	.ta-page .ta-crosslink__layers li {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}

	.ta-page .ta-crosslink__label {
		flex-basis: auto;
	}

	/* Stacked, the right-aligning auto margin would push the pair off-centre. */
	.ta-page .ta-crosslink__actions {
		justify-content: center;
		margin-inline: auto;
	}
}

/* Mobile: single column throughout. */
@media (max-width: 620px) {
	.ta-page .ta-install-grid,
	.ta-page .ta-contact {
		grid-template-columns: 1fr;
	}

	/* The screenshot pair stacks plainly: overlapped, the second is too small. */
	.ta-page .ta-walk__media--pair {
		display: grid;
		gap: var(--space-sm);
		padding: 0;
	}

	.ta-page .ta-walk__media--pair .ta-walk__shot + .ta-walk__shot {
		position: static;
		width: 100%;
	}

	.ta-page .ta-walk__sync {
		align-items: flex-start;
	}

	.ta-page .ta-brochure__panel {
		flex-direction: column;
		padding: var(--space-md);
		text-align: center;
	}

	.ta-page .ta-brochure__note {
		flex-basis: auto;
	}
}

/*
 * Phones: the key features go to one column of rows -- circle left, label and
 * description right, left-aligned -- and the heading row stacks with the
 * pill under the title.
 */
@media (max-width: 600px) {
	.ta-page .ta-features__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.ta-page .ta-features {
		grid-template-columns: minmax(0, 1fr);
	}

	.ta-page .ta-feature {
		flex-direction: row;
		align-items: flex-start;
		gap: 0.9rem;
		padding: 0.9rem 1rem;
		text-align: left;
	}

	.ta-page .ta-feature__icon {
		width: 44px;
		height: 44px;
	}

	.ta-page .ta-feature__icon svg {
		width: 22px;
		height: 22px;
	}

	.ta-page .ta-feature__text {
		align-items: flex-start;
		gap: 0.2rem;
		min-width: 0;
	}

	.ta-page .ta-feature__label,
	.ta-page .ta-feature__desc {
		max-width: none;
	}

	.ta-page .ta-feature__label {
		font-size: 0.9375rem;
	}

	.ta-page .ta-feature__desc {
		font-size: 0.8125rem;
	}
}

/* Small phones: the paired buttons stack full-width rather than wrapping ragged. */
@media (max-width: 520px) {
	.ta-page .hero__actions > a,
	.ta-page .ta-crosslink__actions > .btn,
	.ta-page .ta-brochure__panel > .btn {
		flex: 1 1 100%;
	}

	.ta-page .ta-brochure__panel > .btn {
		align-self: stretch;
	}

	/*
	 * The terminal cards stay two-up: one per row made four near-empty
	 * photo boxes a full screen tall each. Tighter padding and type keep the
	 * longest model number (DS-K1T8003MF) on one line at 390px.
	 */
	.ta-page .ta-terminals {
		gap: var(--space-sm);
	}

	.ta-page .ta-terminal__figure {
		padding: var(--space-sm);
	}

	.ta-page .ta-terminal__body {
		padding: var(--space-sm) 0.5rem;
	}

	.ta-page .ta-terminal__model {
		font-size: 0.95rem;
	}

	/* Back to the compact four-up size: two rows of tags, not three. */
	.ta-page .ta-terminal__methods {
		gap: 0.2rem;
	}

	.ta-page .ta-terminal__methods li {
		gap: 0.2rem;
		padding: 0.22rem 0.35rem;
		font-size: 0.7rem;
	}

	.ta-page .ta-terminal__method-icon svg {
		width: 12px;
		height: 12px;
	}
}