/* ============================================================
   e-Ukraine — self-hosted (the Diia state app typeface).
   Free for commercial use. Cyrillic + Latin. woff2 in assets/fonts/.
   e-Ukraine -> the whole site, text and display alike
   ============================================================ */
@font-face {
	font-family: 'e-Ukraine';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/e-Ukraine-Regular.woff2') format('woff2');
}

@font-face {
	font-family: 'e-Ukraine';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/e-Ukraine-Medium.woff2') format('woff2');
}

@font-face {
	font-family: 'e-Ukraine';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/e-Ukraine-Bold.woff2') format('woff2');
}

/* Menu icon fonts copied from the original Salient export. */
@font-face {
	font-family: 'BORDER FontAwesome';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('../fonts/fontawesome-webfont.woff') format('woff');
}

@font-face {
	font-family: 'BORDER Salient Icons';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('../fonts/icomoon.woff') format('woff');
}

:root {
	/* Every colour is declared once, as an "r, g, b" triple, and the solid form is
	   derived from it. Translucent uses then read rgba(var(--x-rgb), .12) instead
	   of repeating the numbers, so a colour has exactly one place to change — which
	   is the whole point: a second palette is a block of overrides, not a rewrite. */
	--border-palette-0-rgb: 200, 196, 188;
	--border-palette-1-rgb: 225, 221, 211;
	--border-palette-2-rgb: 250, 246, 235;
	--border-palette-3-rgb: 254, 250, 239;
	--border-palette-0: rgb(var(--border-palette-0-rgb));
	--border-palette-1: rgb(var(--border-palette-1-rgb));
	--border-palette-2: rgb(var(--border-palette-2-rgb));
	--border-palette-3: rgb(var(--border-palette-3-rgb));
	--border-bg: var(--border-palette-2);
	--border-bg-rgb: var(--border-palette-2-rgb);
	--border-bg-soft: var(--border-palette-3);
	--border-bg-soft-rgb: var(--border-palette-3-rgb);
	--border-bg-muted: var(--border-palette-1);
	/* A quiet paper grain for the page canvas. It is deliberately absent from
	   controls, cards and the footer, where clean contrast matters more. */
	--border-paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
	--border-text-rgb: 15, 17, 21;
	--border-text: rgb(var(--border-text-rgb));
	--border-muted-rgb: 105, 113, 125;
	--border-muted: rgb(var(--border-muted-rgb));
	--border-faint: #99a0ab;   /* decorative-only low emphasis; never use for essential text */
	--border-accent-rgb: 0, 87, 183;
	--border-accent: rgb(var(--border-accent-rgb));
	--border-telegram-rgb: 34, 158, 217;
	--border-telegram: rgb(var(--border-telegram-rgb));
	/* One colour, #282020, was doing two jobs. The footer and the off-canvas menu
	   are the page's closing slabs — heavier than the page, whichever way round the
	   page is. The source cards are the opposite: a high-contrast island that has
	   to punch. In a light theme both happen to be the same dark brown; in a dark
	   one the slab stays dark and the island goes cream, so they are two tokens. */
	--border-ink-surface-rgb: 40, 32, 32;
	--border-ink-surface: rgb(var(--border-ink-surface-rgb));           /* footer, off-canvas */
	--border-on-ink-surface-rgb: var(--border-palette-3-rgb);
	--border-on-ink-surface: rgb(var(--border-on-ink-surface-rgb));     /* ink on that slab */
	--border-contrast-surface-rgb: 40, 32, 32;
	--border-contrast-surface: rgb(var(--border-contrast-surface-rgb)); /* source cards */
	--border-on-contrast-surface: var(--border-bg-soft);                /* ink on the island */
	/* Ink on a solid --border-text or --border-accent control. Both of those
	   surfaces get lighter in a dark theme, so this gets darker with them. */
	--border-on-ink-rgb: 255, 255, 255;
	--border-on-ink: rgb(var(--border-on-ink-rgb));
	/* A dark surface is lit from above rather than dropped onto the page: the drop
	   shadow does almost nothing on a dark ground, and this hairline does. Zero in
	   the light theme, where the shadow is already doing the work. */
	--border-lift: 0 0 0 0 transparent;
	/* Shadows and the scrim are shadow, not ink. They happen to be the same colour
	   in daylight, which is why they were written as the ink — and in the dark that
	   made the header cast a pale haze and the menu overlay wash the page lighter
	   instead of dimming it. Dark is dark in both themes. */
	--border-shadow-rgb: 15, 17, 21;
	--border-scrim: rgba(15, 17, 21, 0.38);
	/* One pace for everything that opens. Two values rather than a number typed
	   again at every new panel — that is how the last few ended up popping open
	   with no transition at all while the request form slid. */
	--border-reveal-duration: 0.32s;
	--border-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	/* The step drawings are printed into the card rather than pasted onto it.
	   Multiply is how dark ink sinks into light paper; screen is the same move the
	   other way up, and without it a pale figure on a dark card multiplies itself
	   into nothing. */
	--border-illustration-blend: multiply;
	/* Semantic state. Five reds is four too many, but merging them would move
	   pixels, so each is named by the role it actually plays today. */
	--border-danger-rgb: 161, 44, 49;
	--border-danger: rgb(var(--border-danger-rgb));           /* error text */
	--border-danger-line-rgb: 185, 66, 66;
	--border-danger-line: rgb(var(--border-danger-line-rgb)); /* invalid field edge */
	--border-danger-wash-rgb: 214, 64, 69;                    /* error/cancelled fills */
	--border-danger-edge-rgb: 190, 45, 45;                    /* overdue row edge */
	--border-danger-strong-rgb: 179, 38, 30;
	--border-danger-strong: rgb(var(--border-danger-strong-rgb));
	--border-success-rgb: 8, 120, 78;
	--border-success: rgb(var(--border-success-rgb));         /* success text */
	--border-success-mark-rgb: 18, 163, 109;
	--border-success-mark: rgb(var(--border-success-mark-rgb)); /* status dots */
	--border-warning-rgb: 154, 97, 0;
	--border-warning: rgb(var(--border-warning-rgb));
	--border-line: rgba(var(--border-palette-0-rgb), 0.82);
	--border-radius: 24px;
	--border-shadow: 0 18px 48px rgba(var(--border-text-rgb), 0.08);
	/* The sticky header casts its own, because the page slides under it and needs
	   an edge. Written out per theme rather than derived from an alpha: on paper
	   a faint ink shadow is enough, while on a dark ground the same alpha is
	   invisible and the fix is more black, never a lighter colour. */
	/* Light needs none: the slab and the page are 14.76:1 apart and the colour
	   change is the edge. */
	--border-footer-edge: transparent;
	--border-header-shadow: 0 10px 26px rgba(var(--border-shadow-rgb), 0.16);
	--border-header-shadow-condensed: 0 6px 18px rgba(var(--border-shadow-rgb), 0.22);
	/* Layout foundation: every app screen shares the same 1120px content grid.
	   Reading and compact surfaces may be narrower, but never redefine the page. */
	--border-page-width: 1120px;
	--border-page-gutter: clamp(16px, 3vw, 32px);
	--border-reading-width: 820px;
	--border-compact-surface: 756px;
	--border-container: var(--border-page-width);
	--border-work-surface: var(--border-page-width);
	--border-space: clamp(40px, 8vw, 96px);
	/* The display sibling is gone: it was two more files and two more swaps for
	   four places, and e-Ukraine sets them all perfectly well. The token stays
	   because those four still mean "this is display type", and a future face
	   would be named here rather than at each of them. */
	--border-font-display: 'e-Ukraine', sans-serif;
	--border-font-ui: 'e-Ukraine', sans-serif;
	--border-font-mono: var(--border-font-ui);
	--border-font: 'e-Ukraine', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	/* --- Type scale — Diia / design.gov.ua 8pt grid ---
	   Roles: Hero, Page H1, Section H2, Card H3, Lead, Body, Small, Meta.
	   Body 16/24 = 1.5. Hero is the single deliberate off-grid exception. */
	--border-text-xs: 12px;                            /* meta     12/16 */
	--border-text-sm: 14px;                            /* small    14/20 */
	--border-text-meta: clamp(12px, 2vw, 14px);        /* meta     12/16 → 14/18 */
	--border-text-base: 16px;                          /* body     16/24 */
	--border-text-md: 18px;                            /* body L   18/28 */
	--border-text-lg: 20px;                            /* card H3  20/26 */
	--border-text-tagline: clamp(18px, 3.5vw, 24px);   /* lead     18/28 → 24/32 */
	--border-text-subtitle: clamp(20px, 4vw, 24px);    /* H4       20/28 → 24/32 */
	--border-text-section: clamp(24px, 5vw, 40px);     /* Section H2 24/32 → 40/48 */
	--border-text-xl: clamp(28px, 5vw, 40px);          /* Page H1  28/34 → 40/48 */
	--border-text-hero: clamp(29px, 6vw, 72px);        /* Hero, off-grid, one line */
	--border-weight-regular: 400;
	--border-weight-medium: 500;
	--border-weight-semibold: 500;
	--border-weight-bold: 700;
	--border-weight-extra: 700;
	--border-leading-title: 1.2;   /* H2 — grid 48 on 40 */
	--border-leading-tight: 1.3;   /* H4/H5 — grid 32 on 24, 28 on 20 */
	--border-leading-copy: 1.45;   /* small / dense copy */
	--border-leading-body: 1.5;    /* body — Diia 16/24 */
	--border-salient-container: calc(var(--border-page-width) + (var(--border-page-gutter) * 2));
	--container-width: var(--border-salient-container);
}

/* ============================================================
   The same paper, unlit.

   Not an inversion: the roles of the tokens do not move, only their range. The
   page ground stays the darkest thing in the system and cards stay lighter than
   it, exactly as in daylight — flip that relationship and a card reads as a hole
   rather than a sheet lying on top. Nothing is pure black and nothing is pure
   white: warm off-white ink on a warm off-black ground is what stops large type
   smearing, and it keeps the paper warm rather than turning it into a screen.

	Only pages that carry data-border-dark opt in. The tiny head bootstrap resolves
	the system preference before this stylesheet loads; a manual choice writes the
	same data-border-theme attribute and therefore uses this identical palette.
	============================================================ */

:root[data-border-dark] {
	color-scheme: light;
}

:root[data-border-dark][data-border-theme="dark"] {
		color-scheme: dark;
		/* Ground, cards, inputs, lines — same order, same roles, darker range.
		   Warm, because the daylight paper is warm and the paper does not change
		   colour when the lamp goes off. */
		--border-palette-0-rgb: 58, 52, 44;
		--border-palette-1-rgb: 44, 39, 33;
		--border-palette-2-rgb: 26, 23, 20;
		--border-palette-3-rgb: 34, 30, 26;
		--border-text-rgb: 242, 236, 224;
		--border-muted-rgb: 168, 159, 146;
		--border-faint: #7a7267;
		--border-accent-rgb: 77, 148, 255;
		--border-telegram-rgb: 90, 190, 240;

		/* A drawn line on a dark ground reads as a crack, so the edge is barely
		   there and the light on it does the describing instead. */
		--border-line: rgba(var(--border-text-rgb), 0.11);
		--border-shadow: 0 20px 52px rgba(0, 0, 0, 0.5);
		/* Down at the bottom of the scale the contrast formula stops meaning
		   anything — 26,23,20 against 16,14,12 computes as 1.08 — so the boundary
		   gets a hairline rather than being left to whether a screen can separate
		   two near-blacks. */
		--border-footer-edge: rgba(var(--border-on-ink-surface-rgb), 0.08);
		--border-header-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
		--border-header-shadow-condensed: 0 6px 18px rgba(0, 0, 0, 0.62);
		--border-lift: inset 0 1px 0 rgba(255, 255, 255, 0.07);

		/* Fibre catches light, so grain is more visible in the dark, not less. */
		--border-paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");

		/* The slab stays dark and steps up off the page; the island goes cream and
		   keeps its punch. Ink on a solid control follows the control, which is now
		   the light thing on the screen. */
		/* In the light the footer is the darkest thing on screen and the page sits
		   on it. At 44,39,33 the dark theme had it lighter than both the page and a
		   card — the same slab reading as a panel raised above the page instead of
		   the ground under it. Darker than the page restores the relationship, and
		   it is warm rather than black because the whole palette is. */
		--border-ink-surface-rgb: 16, 14, 12;
		--border-on-ink-surface-rgb: 242, 236, 224;
		--border-contrast-surface-rgb: 242, 236, 224;
		--border-on-contrast-surface: rgb(26, 23, 20);
		--border-on-ink-rgb: 26, 23, 20;

		/* State. In daylight this is five reds doing four jobs; in the dark there
		   is no reason for more than two, which is an argument for tidying the
		   light ones later. Muted rather than bright on purpose: coloured pencil on
		   dark card, not a warning light. */
		--border-danger-rgb: 240, 133, 125;
		--border-danger-line-rgb: 240, 133, 125;
		--border-danger-wash-rgb: 240, 133, 125;
		--border-danger-edge-rgb: 240, 133, 125;
		--border-danger-strong-rgb: 255, 157, 146;
		--border-success-rgb: 88, 200, 150;
		--border-success-mark-rgb: 61, 220, 151;
		--border-warning-rgb: 224, 164, 88;

		--border-illustration-blend: screen;

		/* Black, and more of it: dimming a page that is already dark takes a
		   heavier scrim before the menu in front of it reads as being in front. */
		--border-shadow-rgb: 0, 0, 0;
		--border-scrim: rgba(0, 0, 0, 0.66);
}

html body {
	--wp--style--global--content-size: var(--border-salient-container);
	--wp--style--global--wide-size: var(--border-salient-container);
}

body .container,
body .post-area.standard-minimal.full-width-content .post .inner-wrap,
body.material #search-outer #search {
	max-width: var(--border-salient-container) !important;
}

body .wpb_raw_code.wpb_raw_html,
body .wpb_text_column:not(:has(.border-page)) {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--border-salient-container);
	padding-left: var(--border-page-gutter);
	padding-right: var(--border-page-gutter);
	width: 100%;
}

body .wpb_raw_code.wpb_raw_html:has(.border-request-wrap) {
	padding-top: 40px;
}

body,
button,
input,
select,
textarea {
	font-family: var(--border-font);
}

.border-page,
.border-page * {
	box-sizing: border-box;
}

/* Daily random logo rotation (0/90/180/270 — same for everyone, re-rolled per day). */
#header-outer #logo img,
header#top #logo img,
.border-logo-mark {
	transform: rotate(var(--border-logo-rotation, 0deg));
	transform-origin: 50% 50%;
}

.border-page {
	background-color: var(--border-bg);
	background-image: var(--border-paper-grain);
	background-repeat: repeat;
	background-size: 180px 180px;
	color: var(--border-text);
	font-family: var(--border-font);
	font-size: var(--border-text-base);
	font-weight: var(--border-weight-regular);
	line-height: var(--border-leading-body);
	min-height: 100vh;
	padding: 40px 0;
}

.border-container {
	margin: 0 auto;
	max-width: var(--border-salient-container);
	padding-left: var(--border-page-gutter);
	padding-right: var(--border-page-gutter);
	width: 100%;
}

/* The notice sits above the header and its colour runs the full width of the
   viewport; only the icon and the words are held to the site's own grid. */
.border-page-infobox-shell {
	background: var(--border-infobox-bg);
	color: var(--border-infobox-fg);
	padding: 8px 0;
}

.border-page-infobox {
	/* The icon is taller than the line: top-aligned, its centre sat below the
	   text and the notice read as if the words had slipped upward. */
	align-items: center;
	color: inherit;
	display: flex;
	font-family: var(--border-font);
	/* A notice is context, not the page's main task, so it uses the compact
	   14/20 step at every viewport. */
	font-size: 14px;
	font-weight: var(--border-weight-medium);
	gap: 10px;
	line-height: 20px;
	padding: 0;
}

.border-page-infobox-icon {
	align-items: center;
	background: color-mix(in srgb, currentColor 9%, transparent);
	border-radius: 9px;
	display: inline-flex;
	flex: 0 0 28px;
	height: 28px;
	justify-content: center;
}

.border-page-infobox-icon svg {
	display: block;
	height: 16px;
	width: 16px;
}

/* Dismiss control for the page notice. Inherits the notice's own ink, so it
   stays legible on every background an editor can pick. */

.border-page-infobox-dismiss {
	align-items: center;
	align-self: center;
	appearance: none;
	background: color-mix(in srgb, currentColor 9%, transparent);
	border: 0;
	border-radius: 9px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 28px;
	height: 28px;
	justify-content: center;
	padding: 0;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.border-page-infobox-dismiss:hover,
.border-page-infobox-dismiss:focus-visible {
	background: color-mix(in srgb, currentColor 18%, transparent);
}

.border-page-infobox-message {
	min-width: 0;
}

/* The notice is context, the order form is the job: a long message must not own
   the first screen. JS adds .is-clampable only when the text actually overflows,
   so without JS the full notice still renders. */
.border-page-infobox.is-clampable .border-page-infobox-message {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	line-clamp: 3;
	overflow: hidden;
}

.border-page-infobox.is-clampable.is-expanded .border-page-infobox-message {
	-webkit-line-clamp: unset;
	display: block;
	line-clamp: unset;
	overflow: visible;
}

.border-page-infobox-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.border-page-infobox-toggle {
	align-self: flex-start;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-semibold);
	min-height: 28px;
	padding: 0;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.border-page-infobox-message p {
	margin: 0;
}

.border-page-infobox-message p + p {
	margin-top: 8px;
}

.border-page-infobox-message a {
	color: inherit;
	font-weight: var(--border-weight-semibold);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}


/* Hero spacing follows the viewport height so the collapsed form, the Telegram
   alternative and a notice above them all stay on the first screen. Only the
   gaps flex — type sizes stay on the documented scale. */
.border-hero {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2.6vh, 24px);
	padding: 0 0 40px;
}

.border-logo {
	align-items: baseline;
	color: var(--border-text);
	display: inline-flex;
	font-family: var(--border-font-ui);
	font-size: var(--border-text-hero);
	font-weight: var(--border-weight-extra);
	gap: 0.02em;
	letter-spacing: 0;
	line-height: 0.95;
	margin: 0;
	white-space: nowrap;
}

.border-logo .border-logo-mark {
	display: inline-block;
	flex: 0 0 auto;
	height: 1em !important;
	margin: 0 !important;
	max-width: none !important;
	object-fit: contain;
	transform: translate(-4px, calc(0.07em - 4px));
	width: auto !important;
}

.border-logo .border-logo-image {
	display: block;
	height: 1em !important;
	margin: 0 !important;
	max-width: min(100%, 8.45em) !important;
	object-fit: contain;
	width: auto !important;
}

.border-tagline {
	color: var(--border-muted);
	font-size: var(--border-text-tagline);
	font-weight: var(--border-weight-medium);
	line-height: 1.25;
	margin: 0;
	max-width: 720px;
}

@media (max-width: 767px) {
	.border-hero .border-tagline {
		font-size: min(24px, 3.8vw);
		white-space: nowrap;
	}
}

.border-subtitle {
	color: var(--border-text);
	font-size: var(--border-text-subtitle);
	font-weight: var(--border-weight-bold);
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0;
}

.border-page .border-button,
.border-page .border-button-secondary,
.border-button.border-button,
.border-button-secondary.border-button-secondary {
	align-items: center;
	appearance: none;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: var(--border-weight-bold);
	gap: 10px;
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	padding: 14px 22px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.border-page .border-button,
.border-button.border-button {
	background: var(--border-text);
	border: 1px solid var(--border-text);
	color: var(--border-bg-soft);
}

.border-page .border-button-secondary,
.border-button-secondary.border-button-secondary {
	background: var(--border-bg-soft);
	border: 1px solid var(--border-line);
	color: var(--border-text);
}

.border-page .border-button:hover,
.border-page .border-button:focus-visible,
.border-page .border-button-secondary:hover,
.border-page .border-button-secondary:focus-visible,
.border-button.border-button:hover,
.border-button.border-button:focus-visible,
.border-button-secondary.border-button-secondary:hover,
.border-button-secondary.border-button-secondary:focus-visible {
	text-decoration: none;
	transform: translateY(-1px);
}

.border-page .border-button:hover,
.border-page .border-button:focus-visible,
.border-button.border-button:hover,
.border-button.border-button:focus-visible {
	background: var(--border-accent);
	border-color: var(--border-accent);
	color: var(--border-on-ink);
}

.border-page .border-button-secondary:hover,
.border-page .border-button-secondary:focus-visible,
.border-button-secondary.border-button-secondary:hover,
.border-button-secondary.border-button-secondary:focus-visible {
	border-color: rgba(var(--border-accent-rgb), 0.35);
	color: var(--border-accent);
}

body #ajax-content-wrap .nectar-button,
body #ajax-content-wrap .wp-block-button__link,
body #ajax-content-wrap .vc_btn3.vc_btn3,
body .container-wrap input[type="submit"],
body .container-wrap button[type="submit"]:not(.search-widget-btn):not(.border-link-add):not(.border-link-remove):not(.border-pwa-install) {
	align-items: center !important;
	appearance: none;
	background: var(--border-text) !important;
	border: 1px solid var(--border-text) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	color: var(--border-bg-soft) !important;
	cursor: pointer;
	display: inline-flex !important;
	font-family: var(--border-font) !important;
	font-size: var(--border-text-base) !important;
	font-weight: var(--border-weight-bold) !important;
	gap: 10px;
	justify-content: center;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
	min-height: 48px;
	padding: 14px 22px !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase !important;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}

body #ajax-content-wrap .nectar-button:hover,
body #ajax-content-wrap .nectar-button:focus-visible,
body #ajax-content-wrap .wp-block-button__link:hover,
body #ajax-content-wrap .wp-block-button__link:focus-visible,
body #ajax-content-wrap .vc_btn3.vc_btn3:hover,
body #ajax-content-wrap .vc_btn3.vc_btn3:focus-visible,
body .container-wrap input[type="submit"]:hover,
body .container-wrap input[type="submit"]:focus-visible,
body .container-wrap button[type="submit"]:not(.search-widget-btn):not(.border-link-add):not(.border-link-remove):not(.border-pwa-install):hover,
body .container-wrap button[type="submit"]:not(.search-widget-btn):not(.border-link-add):not(.border-link-remove):not(.border-pwa-install):focus-visible {
	background: var(--border-accent) !important;
	border-color: var(--border-accent) !important;
	color: var(--border-on-ink) !important;
	text-decoration: none !important;
	transform: translateY(-1px);
}

body #ajax-content-wrap .nectar-button[class*="see-through"],
body #ajax-content-wrap .nectar-button.transparent,
body #ajax-content-wrap .wp-block-button.is-style-outline .wp-block-button__link,
body #ajax-content-wrap .vc_btn3.vc_btn3-style-outline,
body #ajax-content-wrap .vc_btn3.vc_btn3-style-outline-custom {
	background: var(--border-bg-soft) !important;
	border-color: var(--border-line) !important;
	color: var(--border-text) !important;
}

body #ajax-content-wrap .nectar-button[class*="see-through"]:hover,
body #ajax-content-wrap .nectar-button[class*="see-through"]:focus-visible,
body #ajax-content-wrap .nectar-button.transparent:hover,
body #ajax-content-wrap .nectar-button.transparent:focus-visible,
body #ajax-content-wrap .wp-block-button.is-style-outline .wp-block-button__link:hover,
body #ajax-content-wrap .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
body #ajax-content-wrap .vc_btn3.vc_btn3-style-outline:hover,
body #ajax-content-wrap .vc_btn3.vc_btn3-style-outline:focus-visible,
body #ajax-content-wrap .vc_btn3.vc_btn3-style-outline-custom:hover,
body #ajax-content-wrap .vc_btn3.vc_btn3-style-outline-custom:focus-visible {
	background: var(--border-bg-soft) !important;
	border-color: rgba(var(--border-accent-rgb), 0.35) !important;
	color: var(--border-accent) !important;
}

.border-card {
	background: var(--border-bg-soft);
	border: 1px solid var(--border-line);
	border-radius: var(--border-radius);
	box-shadow: var(--border-shadow), var(--border-lift);
	color: var(--border-text);
	padding: 24px;
}

.border-skip-link {
	background: var(--border-text);
	border-radius: 0 0 12px 12px;
	color: var(--border-on-ink);
	font-weight: var(--border-weight-semibold);
	left: 16px;
	padding: 12px 16px;
	position: fixed;
	top: 0;
	transform: translateY(-120%);
	transition: transform 140ms ease;
	z-index: 100000;
}

.border-skip-link:focus {
	color: var(--border-on-ink);
	outline: 3px solid var(--border-accent);
	outline-offset: 2px;
	transform: translateY(0);
}

.border-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

.border-muted {
	color: var(--border-muted);
}

.border-status-dot {
	background: var(--border-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(var(--border-accent-rgb), 0.12);
	display: inline-block;
	flex: 0 0 auto;
	height: 10px;
	vertical-align: middle;
	width: 10px;
}

.border-status-dot.is-active {
	background: var(--border-accent);
	box-shadow: 0 0 0 6px rgba(var(--border-accent-rgb), 0.12);
}

.border-status-dot.is-pending {
	background: transparent;
	border: 2px solid rgba(var(--border-muted-rgb), 0.36);
	box-shadow: none;
}

.border-status-dot.is-done {
	background: var(--border-success-mark);
	box-shadow: 0 0 0 6px rgba(var(--border-success-mark-rgb), 0.12);
}

/* A payment that did not go through is the one order state the customer has to
   come back to, so it is the one that reads as a problem rather than a stage. */
.border-status-dot.is-failed {
	background: var(--border-danger);
	box-shadow: 0 0 0 6px rgba(var(--border-danger-rgb), 0.12);
}

.border-page .border-status-dot.is-pending {
	height: 10px;
	width: 10px;
}

.border-page h1,
.border-page h2,
.border-page h3,
.border-page p {
	margin-top: 0;
}

.border-page a {
	color: inherit;
}

.border-section {
	padding: calc(var(--border-space) * 0.55) 0;
}

.border-section-header {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
}

.border-section-title {
	color: var(--border-text);
	font-size: var(--border-text-xl);
	font-weight: var(--border-weight-bold);
	letter-spacing: 0;
	line-height: var(--border-leading-title);
	margin-bottom: 0;
}

body.home .border-section .border-section-title,
body.home .border-final-cta .border-section-title {
	font-size: var(--border-text-section);
}

.border-section-text {
	color: var(--border-muted);
	font-size: var(--border-text-md);
	font-weight: var(--border-weight-regular);
	line-height: var(--border-leading-copy);
	margin-bottom: 0;
	max-width: 620px;
}

/* Questions are cards, the same ones the step tiles are, rather than rows in a
   ruled list: on a page made of soft panels a stack of hairlines reads as a
   table that wandered in from somewhere else. The card already carries the
   edge, so nothing here draws a line of its own. */
.border-faq-list {
	display: grid;
	gap: 12px;
}

.border-faq-item {
	padding: 0;
	transition: background-color 200ms var(--border-reveal-ease), border-color 200ms var(--border-reveal-ease);
}

.border-faq-item[open] {
	border-color: rgba(var(--border-accent-rgb), 0.34);
}

/* FAQ is a stack of controls, not a field of bright cards: hover changes the
   paper and the action cue together. A physical lift makes a reading list feel
   jumpy, so the card's resting shadow stays exactly where it is. */
@media (hover: hover) and (pointer: fine) {
	.border-faq-item:hover {
		background-color: var(--border-bg);
		border-color: rgba(var(--border-accent-rgb), 0.34);
	}

	.border-faq-item:hover .border-faq-marker {
		color: var(--border-accent);
	}
}

.border-faq-question {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: var(--border-text-md);
	font-weight: var(--border-weight-medium);
	gap: 20px;
	justify-content: space-between;
	line-height: var(--border-leading-copy);
	list-style: none;
	padding: 20px 24px;
}

/* Safari still paints its own triangle without this, next to ours. */
.border-faq-question::-webkit-details-marker {
	display: none;
}

.border-faq-question:focus-visible {
	border-radius: var(--border-radius);
	outline: 2px solid var(--border-accent);
	outline-offset: 2px;
}

/* A plus that becomes a minus: two strokes, one of which turns. Cheaper than a
   chevron to read at a glance, and it says "more of this" rather than "go
   somewhere". */
.border-faq-marker {
	flex: 0 0 16px;
	height: 16px;
	position: relative;
	transition: color 200ms var(--border-reveal-ease);
	width: 16px;
}

.border-faq-marker::before,
.border-faq-marker::after {
	background: currentColor;
	border-radius: 2px;
	content: '';
	inset: 50% 0 auto 0;
	height: 2px;
	position: absolute;
	transform: translateY(-50%);
	transition: transform var(--border-reveal-duration) var(--border-reveal-ease), opacity var(--border-reveal-duration) var(--border-reveal-ease);
}

.border-faq-marker::after {
	transform: translateY(-50%) rotate(90deg);
}

.border-faq-item[open] .border-faq-marker::after {
	opacity: 0;
	transform: translateY(-50%) rotate(0deg);
}

.border-faq-item[open] .border-faq-marker {
	color: var(--border-accent);
}

/* The reveal the rest of the site uses: a grid row grown from nothing, so no
   height is ever hardcoded and any answer is the right length. The row is what
   animates; the inner wrapper is what clips.

   Collapsed is the enhanced state, not the default one: the script marks each
   card it has taken charge of, and only then is the answer hidden. Hide it in
   the stylesheet instead and a reader whose script never arrived gets a
   question with nothing behind it. */
.border-faq-answer {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--border-reveal-duration) var(--border-reveal-ease), opacity var(--border-reveal-duration) var(--border-reveal-ease);
}

.border-faq-item.is-enhanced .border-faq-answer {
	grid-template-rows: 0fr;
	opacity: 0;
}

.border-faq-item.is-enhanced.is-open .border-faq-answer {
	grid-template-rows: 1fr;
	opacity: 1;
}

.border-faq-answer-inner {
	min-height: 0;
	overflow: hidden;
}

.border-faq-answer p {
	color: var(--border-muted);
	font-size: var(--border-text-base);
	line-height: var(--border-leading-body);
	margin: 0;
	max-width: 68ch;
	padding: 0 24px 22px;
}

.border-kicker,
.border-card-label,
.border-status-label {
	align-items: center;
	color: var(--border-muted);
	display: inline-flex;
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-semibold);
	gap: 10px;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.border-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.border-actions .border-button,
.border-actions .border-button-secondary {
	width: 100%;
}

.border-card h3 {
	color: var(--border-text);
	font-size: var(--border-text-lg);
	font-weight: var(--border-weight-bold);
	letter-spacing: 0;
	line-height: var(--border-leading-tight);
	margin-bottom: 10px;
}

.border-card p:last-child {
	margin-bottom: 0;
}

.border-step {
	align-items: center;
	background: var(--border-bg);
	border: 1px solid var(--border-line);
	border-radius: 999px;
	color: var(--border-muted);
	display: inline-flex;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	height: 32px;
	justify-content: center;
	line-height: 1;
	margin-bottom: 22px;
	width: 48px;
}

.border-step-card {
	display: flex;
	flex-direction: column;
}

.border-step-card-top {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	min-height: 104px;
}

.border-step-card .border-step {
	margin-bottom: 0;
}

.border-step-illustration {
	display: block;
	height: 104px;
	mix-blend-mode: var(--border-illustration-blend);
	object-fit: contain;
	opacity: 0.88;
	width: 104px;
}

.border-step-illustration-set {
	display: block;
	flex: 0 0 104px;
	height: 104px;
	width: 104px;
}

.border-step-illustration--dark {
	display: none;
}

:root[data-border-theme="dark"] .border-step-illustration--light {
	display: none;
}

:root[data-border-theme="dark"] .border-step-illustration--dark {
	display: block;
}

.border-source-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.border-page .border-source {
	align-items: center;
	background: var(--border-contrast-surface);
	border: 1px solid var(--border-contrast-surface);
	border-radius: 12px;
	box-shadow: inset 0 3px 0 var(--border-source-brand-color, transparent);
	color: var(--border-on-contrast-surface);
	display: flex;
	font-size: var(--border-text-base);
	font-weight: var(--border-weight-bold);
	justify-content: center;
	line-height: var(--border-leading-tight);
	min-height: 78px;
	padding: 18px;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
	width: 100%;
}

.border-source[href]:hover,
.border-source[href]:focus-visible {
	background: var(--border-source-hover-background, var(--border-contrast-surface));
	border-color: var(--border-source-hover-background, var(--border-contrast-surface));
	/* The fallback pairs with --border-contrast-surface above, which does follow
	   the theme, so this one is a token by design. The per-source value that
	   overrides it is an absolute — see border_theme_source_card_style(). */
	color: var(--border-source-hover-foreground, var(--border-on-contrast-surface));
	outline: 2px solid var(--border-text);
	outline-offset: 3px;
	transform: translateY(-2px);
}

.border-source-more {
	min-width: 0;
}

.border-direction-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
}

.border-direction-card .border-card-label {
	margin-bottom: 24px;
}

.border-direction-card h3 {
	font-size: clamp(24px, 4vw, 32px);
	margin-bottom: 12px;
}

.border-direction-card .border-muted {
	max-width: 390px;
}

/* Design system reference ------------------------------------------------ */
.border-design-system {
	padding-top: 88px;
}

.border-ds-intro {
	border-bottom: 1px solid var(--border-line);
	margin-bottom: 56px;
	max-width: 760px;
	padding-bottom: 40px;
}

.border-ds-intro .border-kicker {
	margin-bottom: 18px;
}

.border-ds-intro h1 {
	font-family: var(--border-font-ui);
	font-weight: var(--border-weight-bold);
	font-size: clamp(40px, 7vw, 72px);
	line-height: 1;
	margin: 0 0 18px;
}

.border-ds-intro > p:last-child {
	color: var(--border-muted);
	font-size: var(--border-text-md);
	margin: 0;
	max-width: 580px;
}

.border-ds-section {
	border-bottom: 1px solid var(--border-line);
	padding: 48px 0;
}

.border-ds-section:last-child {
	border-bottom: 0;
}

.border-ds-swatch-grid,
.border-ds-surface-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.border-ds-swatch {
	aspect-ratio: 1.45;
	border: 1px solid var(--border-line);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px;
}

.border-ds-swatch span,
.border-ds-type-list > div > span,
.border-ds-dark-card > p {
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.border-ds-swatch strong {
	font-size: var(--border-text-sm);
}

.border-ds-swatch--0 { background: var(--border-palette-0); }
.border-ds-swatch--1 { background: var(--border-palette-1); }
.border-ds-swatch--2 { background: var(--border-palette-2); }
.border-ds-swatch--3 { background: var(--border-palette-3); }
.border-ds-swatch--ink,
.border-ds-swatch--footer { background: var(--border-ink-surface); color: var(--border-bg-soft); }

.border-ds-type-list {
	display: grid;
	gap: 22px;
}

.border-ds-type-list > div {
	border-bottom: 1px solid var(--border-line);
	padding-bottom: 22px;
}

.border-ds-type-list > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.border-ds-type-list p {
	margin: 8px 0 0;
}

.border-ds-hero { font-family: var(--border-font-ui); font-size: var(--border-text-hero); font-weight: var(--border-weight-bold); letter-spacing: -0.01em; line-height: 0.95; }
.border-ds-page-title { font-size: var(--border-text-xl); font-weight: var(--border-weight-bold); line-height: var(--border-leading-title); }
.border-ds-section-title { font-size: var(--border-text-section); font-weight: var(--border-weight-bold); line-height: var(--border-leading-title); }
.border-ds-card-title { font-size: var(--border-text-lg); font-weight: var(--border-weight-bold); line-height: var(--border-leading-tight); }
.border-ds-lead { color: var(--border-muted); font-size: var(--border-text-tagline); font-weight: var(--border-weight-medium); line-height: var(--border-leading-tight); }
.border-ds-body { font-size: var(--border-text-base); max-width: 620px; }
.border-ds-small { color: var(--border-muted); font-size: var(--border-text-sm); line-height: 20px; }
.border-ds-meta { color: var(--border-muted); font-size: var(--border-text-meta); font-weight: var(--border-weight-medium); line-height: clamp(16px, 2.5vw, 18px); }

.border-ds-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 360px;
}

.border-ds-actions button:disabled {
	cursor: wait;
	opacity: 0.64;
}

.border-ds-form-grid {
	display: grid;
	gap: 18px;
	max-width: var(--border-work-surface);
}

.border-ds-surface-grid {
	grid-template-columns: 1fr;
}

.border-ds-dark-card {
	background: var(--border-contrast-surface);
	border-radius: 12px;
	color: var(--border-on-contrast-surface);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 200px;
	padding: 24px;
}

.border-ds-dark-card > p,
.border-ds-dark-card h3,
.border-ds-dark-card span {
	margin: 0;
}

.border-ds-dark-card h3 {
	font-size: var(--border-text-xl);
}

.border-ds-dark-card span {
	color: rgba(var(--border-bg-soft-rgb), 0.68);
	font-size: var(--border-text-sm);
}

.border-ds-rules {
	display: grid;
	gap: 12px;
	list-style: none;
	margin: 0;
	max-width: 760px;
	padding: 0;
}

.border-ds-rules li {
	border-bottom: 1px solid var(--border-line);
	padding: 0 0 12px 26px;
	position: relative;
}

.border-ds-rules li::before {
	background: var(--border-text);
	border-radius: 50%;
	content: "";
	height: 7px;
	left: 0;
	position: absolute;
	top: 0.5em;
	width: 7px;
}

@media (min-width: 768px) {
	.border-ds-section {
		padding: 64px 0;
	}

	.border-ds-swatch-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.border-ds-actions {
		align-items: center;
		flex-direction: row;
		max-width: none;
	}

	.border-ds-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.border-ds-form-grid .border-field:last-child {
		grid-column: 1 / -1;
	}

	.border-ds-surface-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.border-status-list {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

.border-status-card {
	box-shadow: none;
}

.border-status-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
}

.border-status-meta {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-medium);
}

.border-status-line {
	background: var(--border-line);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
	width: 100%;
}

.border-status-progress {
	background: var(--border-accent);
	border-radius: inherit;
	display: block;
	height: 100%;
	width: 40%;
}

.border-status-progress--crossing {
	width: 68%;
}

.border-status-progress--delivered {
	width: 100%;
}

.border-status-dot--requested {
	background: var(--border-muted);
	box-shadow: 0 0 0 6px rgba(var(--border-muted-rgb), 0.12);
}

.border-status-dot--crossing {
	background: var(--border-accent);
}

.border-status-dot--delivered {
	background: var(--border-success-mark);
	box-shadow: 0 0 0 6px rgba(var(--border-success-mark-rgb), 0.12);
}

.border-final-cta {
	align-items: flex-start;
	background: transparent;
	border: 0;
	border-radius: 0;
	border-top: 1px solid var(--border-line);
	box-shadow: none;
	color: var(--border-text);
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 52px;
	padding: 40px 0 8px;
}

/* The heading and its line sit in one wrapper div with no spacing of their own,
   so they render flush. Give them room on the phone, where the two stack and
   read as one run-on block. */
.border-final-cta > div {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.border-final-cta .border-section-title {
	color: var(--border-text);
}

.border-final-cta .border-muted {
	color: var(--border-muted);
}

.border-final-cta .border-button {
	background: var(--border-text);
	border-color: var(--border-text);
	box-shadow: none;
	color: var(--border-on-ink);
}

.border-final-cta .border-button:hover,
.border-final-cta .border-button:focus-visible {
	background: var(--border-accent);
	border-color: var(--border-accent);
	color: var(--border-on-ink);
}

/* Short entry page for prospective carriers. It uses the same raised and
   contrast surfaces as the design-system reference, without section rules. */
.border-become-intro {
	display: grid;
	gap: 48px;
	padding: 28px 0 56px;
}

.border-become-intro-hero {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2.6vh, 24px);
	max-width: 760px;
}

.border-become-intro-hero .border-kicker {
	margin: 0;
}

.border-become-intro-title {
	color: var(--border-text);
	font-family: var(--border-font-ui);
	font-size: var(--border-text-hero);
	font-weight: var(--border-weight-bold);
	letter-spacing: 0;
	line-height: 0.95;
	margin: 0;
}

.border-become-intro-lead {
	color: var(--border-muted);
	font-size: var(--border-text-tagline);
	font-weight: var(--border-weight-medium);
	line-height: var(--border-leading-tight);
	margin: 0;
	max-width: 620px;
}

.border-become-intro-hero-actions,
.border-become-intro-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 0;
	max-width: 360px;
}

.border-become-intro-role {
	background: var(--border-contrast-surface);
	border-radius: 12px;
	color: var(--border-on-contrast-surface);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 250px;
	padding: 28px;
}

.border-become-intro-role .border-card-label {
	color: rgba(var(--border-bg-soft-rgb), 0.68);
	margin: 0 0 32px;
}

.border-become-intro-role h2 {
	color: inherit;
	font-family: var(--border-font-ui);
	font-size: var(--border-text-section);
	font-weight: var(--border-weight-bold);
	letter-spacing: 0;
	line-height: var(--border-leading-title);
	margin: 0;
	max-width: 790px;
}

.border-become-intro-fit {
	padding: 28px;
}

.border-become-intro-fit .border-section-title {
	margin: 0 0 26px;
}

.border-become-intro-fit ul {
	display: grid;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.border-become-intro-fit li {
	align-items: flex-start;
	display: flex;
	gap: 12px;
}

.border-become-intro-fit .border-status-dot {
	margin-top: 0.45em;
}

.border-become-intro-fit li p {
	color: var(--border-muted);
	font-size: var(--border-text-base);
	line-height: var(--border-leading-copy);
	margin: 0;
}

.border-become-intro-steps .border-section-header {
	margin-bottom: 24px;
}

.border-become-intro-steps .border-section-title {
	margin: 0;
}

.border-become-intro-step-grid {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.border-become-intro-step-grid .border-card {
	display: flex;
	flex-direction: column;
	min-height: 150px;
	padding: 24px;
}

.border-become-intro-step-grid .border-step {
	margin-bottom: auto;
}

.border-become-intro-step-grid p {
	color: var(--border-text);
	font-size: var(--border-text-md);
	font-weight: var(--border-weight-medium);
	line-height: var(--border-leading-tight);
	margin: 24px 0 0;
}

.border-become-intro-cta {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 28px;
}

.border-content .border-become-intro-cta .border-section-title {
	margin: 0 0 10px;
}

.border-become-intro-cta .border-muted {
	font-size: var(--border-text-base);
	line-height: var(--border-leading-copy);
	margin: 0;
	max-width: 640px;
}

.border-become-intro-rules {
	color: var(--border-muted);
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-bold);
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.border-become-intro-rules:hover,
.border-become-intro-rules:focus-visible {
	color: var(--border-text);
}

.border-home-status-card {
	box-shadow: none;
	margin: 0 auto;
	max-width: 720px;
}

.border-home-status-top {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 22px;
}

.border-home-status-top h3 {
	margin-bottom: 0;
}

.border-home-status-list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.border-home-status-list li {
	align-items: center;
	background: var(--border-bg);
	border: 1px solid var(--border-line);
	border-radius: 18px;
	display: grid;
	gap: 12px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	min-height: 56px;
	padding: 14px 16px;
}

.border-home-status-list span:not(.border-status-dot) {
	color: var(--border-text);
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.border-home-status-list em {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
	font-style: normal;
	font-weight: var(--border-weight-medium);
	line-height: 1.2;
}

.border-request-wrap {
	margin: 0 auto;
	max-width: none;
	padding: 0 0 32px;
	width: 100%;
}

.border-request-card {
	box-shadow: var(--border-shadow), var(--border-lift);
}

.border-request-header {
	margin-bottom: 24px;
}

/* App-page headers already own the title-to-copy rhythm through their flex
   gap. Cancel the generic content-title margin so it is not added a second
   time between the heading group and the description. */
.border-content .border-request-header .border-section-title {
	margin-bottom: 0;
}

.border-request-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.border-form-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

.border-field {
	color: var(--border-text);
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.border-field span {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.border-field .border-required {
	color: var(--border-danger);
	font-style: normal;
}

/* A sum does not need the width of a description. The label and help text still
   run the full width of the card; only the input is held back. */
.border-field--narrow > input {
	max-width: 16rem;
}

.border-field .border-optional {
	color: var(--border-muted);
	font-size: inherit;
	font-weight: var(--border-weight-medium);
	letter-spacing: 0;
	text-transform: none;
}

.border-field-help,
.border-field-error {
	font-size: var(--border-text-meta);
	line-height: 1.35;
}

/* The tabs are the request type. Segmented, not a select: three short choices
   that should read as one decision made in a tap.

   Stacked by default — three of these labels do not fit across a phone, and
   squeezing them clipped the first one and pushed the last past the card. They
   go side by side only where each still gets a readable line. */
.border-tabs {
	display: grid;
	gap: 6px;
}

@media (min-width: 600px) {
	.border-tabs {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.border-tab {
	background: var(--border-bg);
	border: 1px solid var(--border-line);
	border-radius: 14px;
	color: var(--border-muted);
	cursor: pointer;
	font: inherit;
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.04em;
	line-height: 1.2;
	min-height: 44px;
	padding: 8px 10px;
	/* Side by side the longer labels take two lines; break them evenly instead
	   of leaving one word stranded. Ignored where unsupported. */
	text-wrap: balance;
	text-transform: uppercase;
}

.border-tab.is-active {
	background: var(--border-text);
	border-color: var(--border-text);
	color: var(--border-bg);
}

.border-tab:focus-visible {
	outline: 2px solid var(--border-accent);
	outline-offset: 2px;
}

/* The panels carry their own `display`, which outranks the browser's
   `[hidden] { display: none }` — same trap as .border-my-orders[hidden]. */
/* A tab swap is not an opening: the panels take the same place, so animating
   height would make the card jump between two contents. A short rise into
   place says "this is new" without moving anything around it. Only a real
   switch carries the attribute — see border-request-form.js. */
[data-border-tab-content][data-border-entering] {
	animation: border-tab-enter var(--border-reveal-duration) var(--border-reveal-ease) both;
}

@keyframes border-tab-enter {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

[data-border-tab-content][hidden] {
	display: none !important;
}

/* Asked only when there is no link to read the route and the intent from. Taps,
   not selects: two short questions should not read like more form to fill in.
   Collapsed with the same 0fr grid trick as the form itself, so typing a link
   reads as the form tightening rather than the contact field jumping up the
   page. Note the inner wrapper: a 0fr track only reaches zero when the item in
   it has overflow:hidden and min-height:0. */
.border-inferred {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.35s ease, opacity 0.3s ease;
}

.border-inferred.is-collapsed {
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
}

.border-inferred-inner {
	display: grid;
	gap: 18px;
	min-height: 0;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.border-inferred {
		transition: none;
	}
}

.border-choice {
	border: 0;
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.border-choice legend {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.06em;
	line-height: 1.2;
	margin-bottom: 8px;
	padding: 0;
	text-transform: uppercase;
}

.border-choice label {
	align-items: center;
	background: var(--border-bg);
	border: 1px solid var(--border-line);
	border-radius: 14px;
	cursor: pointer;
	display: flex;
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-medium);
	gap: 10px;
	min-height: 48px;
	padding: 10px 14px;
}

.border-choice input {
	accent-color: var(--border-accent);
	margin: 0;
	width: auto;
}

.border-choice label:has(input:checked) {
	background: var(--border-text);
	border-color: var(--border-text);
	color: var(--border-bg);
}

.border-choice label:focus-within {
	border-color: var(--border-accent);
}

@media (min-width: 768px) {
	.border-choice {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}

	.border-choice legend {
		grid-column: 1 / -1;
	}
}

.border-field-help {
	color: var(--border-muted);
}

/* A signed-in customer is told which contacts the order carries instead of
   being asked to type them again; the way to change them is the account. */
.border-known-contact {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.border-known-contact a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.border-field-error {
	color: var(--border-danger);
	font-weight: var(--border-weight-semibold);
	min-height: 0;
}

.border-field-head {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.border-link-remove {
	align-items: center;
	appearance: none;
	background: var(--border-bg);
	border: 1px solid var(--border-line);
	border-radius: 999px;
	color: var(--border-text);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font: inherit;
	font-size: 22px;
	font-weight: var(--border-weight-semibold);
	height: 44px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease, transform 180ms ease;
	width: 44px;
}

/* Full-width "add link" affordance under the link list. */
.border-link-add {
	align-items: center;
	appearance: none;
	background: var(--border-bg);
	border: 1px dashed var(--border-line);
	border-radius: 18px;
	color: var(--border-muted);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-medium);
	gap: 8px;
	justify-content: center;
	line-height: 1;
	margin-top: 20px;
	min-height: 48px;
	padding: 12px 16px;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
	width: 100%;
}

.border-link-add-icon {
	color: inherit;
	font-size: 20px;
	font-weight: var(--border-weight-semibold);
	line-height: 1;
}

.border-link-add:hover,
.border-link-add:focus-visible {
	background: var(--border-bg-soft);
	border-color: var(--border-text);
	color: var(--border-text);
	outline: none;
}

.border-link-remove:hover,
.border-link-remove:focus-visible {
	background: var(--border-text);
	border-color: var(--border-text);
	color: var(--border-on-ink);
	outline: none;
	transform: translateY(-1px);
}

.border-link-add:disabled,
.border-link-add[aria-disabled="true"] {
	cursor: not-allowed;
	opacity: 0.42;
}

.border-link-add:disabled:hover,
.border-link-add[aria-disabled="true"]:hover {
	background: var(--border-bg);
	border-color: var(--border-line);
	color: var(--border-muted);
}

/* Salient's `body[data-button-style*="slightly_rounded"] button` forces 4px !important
   (specificity 0,1,2). Beat it with a more specific selector so the add button's
   radius matches the form inputs (18px). */
body .border-links-field .border-link-add {
	border-radius: 18px !important;
}

.border-link-list {
	display: grid;
	gap: 10px;
}

.border-link-row {
	align-items: center;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax(0, 1fr) auto;
}

.border-link-row--primary {
	position: relative;
}

.border-link-row--primary::before {
	background: var(--border-muted);
	content: "";
	height: 18px;
	left: 18px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07.07l2-2a5 5 0 0 0-7.07-7.07l-1.15 1.15'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07-.07l-2 2a5 5 0 0 0 7.07 7.07l1.15-1.15'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07.07l2-2a5 5 0 0 0-7.07-7.07l-1.15 1.15'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07-.07l-2 2a5 5 0 0 0 7.07 7.07l1.15-1.15'/%3E%3C/svg%3E") center / contain no-repeat;
	z-index: 1;
}

.border-field .border-link-row--primary input {
	padding-left: 48px;
}

.border-link-row:first-child {
	grid-template-columns: minmax(0, 1fr);
}

.border-link-remove {
	font-size: 24px;
}

.border-link-remove[hidden] {
	display: none;
}

.border-field input,
.border-field select,
.border-field textarea {
	appearance: none;
	background: var(--border-bg-muted);
	border: 1px solid var(--border-line);
	border-radius: 18px;
	color: var(--border-text);
	font: inherit;
	font-size: var(--border-text-base);
	line-height: 1.35;
	min-height: 58px;
	outline: none;
	padding: 16px 18px;
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
	width: 100%;
}

.border-field select {
	background-image: linear-gradient(45deg, transparent 50%, var(--border-muted) 50%), linear-gradient(135deg, var(--border-muted) 50%, transparent 50%);
	background-position: calc(100% - 22px) 25px, calc(100% - 16px) 25px;
	background-repeat: no-repeat;
	background-size: 6px 6px, 6px 6px;
	padding-right: 44px;
}

/* The description sits on the first screen now, before anything unfolds, so it
   starts at three lines and grows by dragging. The manager form keeps the taller
   box — there the surrounding page is not competing for the fold. */
.border-field textarea {
	min-height: 92px;
	resize: vertical;
}

.border-manager-form .border-field textarea {
	min-height: 148px;
}

.border-field input::placeholder,
.border-field textarea::placeholder {
	color: var(--border-muted);
}

@media (max-width: 767px) {
	.border-field .border-link-row--primary input::placeholder {
		font-size: 15px;
	}
}

.border-field input:focus,
.border-field select:focus,
.border-field textarea:focus {
	background: var(--border-bg-soft);
	border-color: rgba(var(--border-accent-rgb), 0.45);
	box-shadow: 0 0 0 4px rgba(var(--border-accent-rgb), 0.1);
}

.border-file-field input[type="file"] {
	cursor: pointer;
	padding: 14px;
}

.border-file-field input[type="file"]::file-selector-button {
	background: var(--border-bg-soft);
	border: 1px solid var(--border-line);
	border-radius: 999px;
	color: var(--border-text);
	cursor: pointer;
	font: inherit;
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-semibold);
	margin-right: 12px;
	padding: 10px 14px;
}

.border-form-footer {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 6px;
}

.border-form-state {
	color: var(--border-muted);
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-medium);
	margin-bottom: 0;
}

.border-field.is-invalid input,
.border-field.is-invalid select,
.border-field.is-invalid textarea {
	background: var(--border-bg-soft);
	border-color: var(--border-danger-line);
	box-shadow: 0 0 0 4px rgba(var(--border-danger-line-rgb), 0.1);
}

.border-submit-button {
	width: 100%;
}

.border-submit-button:disabled {
	cursor: wait;
	opacity: 0.72;
	transform: none;
}

.border-submit-button.is-loading {
	background: var(--border-accent);
	border-color: var(--border-accent);
	color: var(--border-on-ink);
}

/* One way to open a panel.
   A grid row animated from 1fr to 0fr slides a block open without anyone
   hardcoding a height, and it works whatever is inside. Two rules make it
   behave: the single child clips itself, and the collapsed block is faded and
   made unclickable rather than hidden — an element CSS has set to display:none
   cannot transition at all, and one that starts out visibility:hidden has no
   rendered "before" for the row to move from, so the slide silently never runs.
   Keeping the fields inside out of the tab order is therefore JavaScript's job,
   with inert, exactly as the request form has always done it. */
.border-reveal {
	display: grid;
	grid-template-rows: 1fr;
	transition:
		grid-template-rows var(--border-reveal-duration) var(--border-reveal-ease),
		opacity calc(var(--border-reveal-duration) * 0.75) var(--border-reveal-ease);
}

.border-reveal > * {
	min-height: 0;
	overflow: hidden;
}

.border-reveal.is-collapsed {
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
	transition:
		grid-template-rows var(--border-reveal-duration) var(--border-reveal-ease),
		opacity calc(var(--border-reveal-duration) * 0.75) var(--border-reveal-ease);
}

/* Progressive disclosure (hero form): the rest of the fields collapse to a
   single link field + submit until the visitor engages. Same technique as
   .border-reveal, on the form's own element; JS toggles .is-collapsed, so
   visitors without JS still get the full form. */
.border-form-rest {
	display: grid;
	grid-template-rows: 1fr;
	transition:
		grid-template-rows var(--border-reveal-duration) var(--border-reveal-ease),
		opacity calc(var(--border-reveal-duration) * 0.75) var(--border-reveal-ease);
}

.border-form-rest.is-collapsed {
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
}

.border-request-form--hero:not(.is-revealed) .border-link-add {
	display: none;
}

/* Telegram is the same calm alternative before both the hero and full form. */
.border-telegram-order-alternative {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin-bottom: clamp(10px, 1.6vh, 16px);
	text-align: center;
}

.border-telegram-order-alternative .border-tg-order-button {
	justify-content: center;
	min-height: 48px;
	width: 100%;
}

.border-form-rest-inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 0;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.border-form-rest {
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Everything still opens and closes — it just stops travelling to get there. */
	.border-reveal,
	.border-reveal.is-collapsed,
	.border-shipping-reveal,
	.border-shipping-reveal.is-collapsed,
	.border-ui-ready .border-manager-filters-reveal,
	.border-ui-ready .border-manager-filters-reveal:not(.is-open) {
		transition: none;
	}

	[data-border-tab-content][data-border-entering] {
		animation: none;
	}
}

/* Hero order form: the form is the homepage's primary call to action. */
.border-hero-form {
	/* Gives the hero statement room to land before the two order paths begin,
	   while keeping the collapsed form inside the first viewport. */
	margin-top: clamp(16px, 2.3vh, 28px);
	width: 100%;
}

@media (max-height: 760px) {
	.border-hero-form {
		margin-top: 12px;
	}
}

.border-request-wrap--hero {
	margin: 0;
	max-width: var(--border-work-surface);
	padding: 0;
}

.border-request-wrap--hero .border-request-card {
	box-shadow: var(--border-shadow), var(--border-lift);
}

.border-request-success {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.border-request-success .border-kicker,
.border-request-success .border-section-title,
.border-request-success .border-muted {
	margin-bottom: 0;
}

.border-request-success-code {
	align-items: flex-start;
	background: var(--border-bg-muted);
	border: 1px solid var(--border-line);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
}

.border-request-success-code span {
	color: var(--border-muted);
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
}

.border-request-success-code .border-tracking-code {
	color: var(--border-text);
	font-family: var(--border-font-mono);
	font-size: var(--border-text-md);
	letter-spacing: 0.04em;
}

.border-copy-code {
	margin-top: 6px;
	width: fit-content;
}

.border-copy-state {
	color: var(--border-success);
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-semibold);
	min-height: 1em;
}

.border-request-success-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.border-request-success-actions .border-button,
.border-request-success-actions .border-button-secondary {
	width: 100%;
}

/* Hero kicker line: the "Ukraine ↔ EU" status label on its own. The "how it
   works" anchor used to sit inline here and was dropped — the section it pointed
   at is already the next thing on the page. Mobile stays on the 12px grid;
   desktop reaches 14px. */
.border-hero-kicker {
	font-size: clamp(12px, 3vw, 14px);
	letter-spacing: 0.05em;
	margin: 0;
}

.border-form-notice {
	border: 1px solid var(--border-line);
	border-radius: 18px;
	font-weight: var(--border-weight-semibold);
	margin-bottom: 20px;
	padding: 14px 16px;
}

.border-form-notice p {
	margin-bottom: 8px;
}

.border-form-notice p:last-child {
	margin-bottom: 0;
}

.border-form-notice a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.border-form-notice--success {
	background: rgba(var(--border-success-mark-rgb), 0.1);
	border-color: rgba(var(--border-success-mark-rgb), 0.24);
	color: var(--border-success);
}

.border-form-notice--error {
	background: rgba(var(--border-danger-wash-rgb), 0.1);
	border-color: rgba(var(--border-danger-wash-rgb), 0.24);
	color: var(--border-danger);
}

.border-contact-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 18px 0;
}

.border-contact-buttons .border-button-secondary {
	width: 100%;
}

.border-order-status {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0 auto;
	max-width: none;
	padding: 32px 0;
	width: 100%;
}

.border-honeypot {
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	left: -10000px !important;
	margin: -1px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	padding: 0 !important;
	pointer-events: none !important;
	position: absolute !important;
	top: auto !important;
	white-space: nowrap !important;
	width: 1px !important;
}

.border-account {
	display: grid;
	gap: 24px;
	margin: 0 auto;
	max-width: none;
	padding: 32px 0;
	width: 100%;
}

.border-account-gate,
.border-account-empty {
	display: grid;
	gap: 18px;
	justify-items: start;
}

.border-account:has(.border-account-gate) {
	align-content: center;
	min-height: min(620px, calc(100dvh - 180px));
}

.border-account-reassurance {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
	line-height: var(--border-leading-copy);
	margin: -6px 0 0;
	max-width: 62ch;
}

.border-account-login-methods {
	display: grid;
	gap: 18px;
	margin-top: 6px;
	width: 100%;
}

.border-account-login-method {
	border-top: 1px solid var(--border-line);
	display: grid;
	gap: 12px;
	padding-top: 18px;
	width: 100%;
}

.border-account-login-method h3,
.border-account-login-method p {
	margin: 0;
}

.border-account-login-method h3 {
	font-size: var(--border-text-md);
}

.border-account-login-method p {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
	line-height: var(--border-leading-copy);
	max-width: 38ch;
}

.border-account-login-method .border-button {
	justify-self: start;
}

.border-form-honeypot {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

@media (min-width: 760px) {
	.border-account-login-methods {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.border-account-header {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: space-between;
}

.border-account-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.border-account-orders > h3 {
	margin: 0 0 16px;
}

.border-account-order-list {
	display: grid;
	gap: 12px;
}

.border-account-order {
	align-items: center;
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

.border-account-order-main {
	align-items: flex-start;
	display: flex;
	gap: 14px;
}

.border-account-order-main strong,
.border-account-order-main span,
.border-account-order-state strong,
.border-account-order-state time {
	display: block;
}

.border-account-order-main span,
.border-account-order-state time {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
	margin-top: 4px;
}

/* Tracking is always there; the receipt appears only once the register has
   issued one, so the pair has to sit well as one button or two. */
.border-account-order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Money gets its own row across the card rather than a fourth column: it is
   absent until the order is priced, and a column that is usually empty leaves a
   hole in every other card. */
.border-account-order-payment {
	align-items: center;
	border-top: 1px solid var(--border-line);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	padding-top: 14px;
}

.border-account-order-payment strong {
	font-size: var(--border-text-sm);
}

.border-account-order-payment span,
.border-account-order-payment time {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
}

.border-account-order-payment .border-button-secondary {
	margin-left: auto;
}

@media (min-width: 760px) {
	.border-account-header {
		align-items: center;
		flex-direction: row;
	}

	.border-account-order {
		grid-template-columns: minmax(0, 1fr) auto auto;
	}

	.border-account-order-payment {
		grid-column: 1 / -1;
	}
}

.border-order-summary {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.border-tracking-now {
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr;
	overflow: hidden;
	padding: 0;
}

.border-tracking-now > div {
	background: var(--border-bg);
	padding: 22px;
}

.border-tracking-eyebrow {
	color: var(--border-muted);
	display: block;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.08em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.border-tracking-now strong {
	color: var(--border-text);
	display: block;
	font-size: var(--border-text-lg);
	line-height: 1.2;
}

.border-tracking-now p {
	color: var(--border-muted);
	margin: 10px 0 0;
}

.border-tracking-events {
	box-shadow: none;
	padding: 22px;
}

.border-tracking-events h3 {
	margin: 0 0 22px;
}

.border-tracking-events ol {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.border-tracking-events li {
	display: grid;
	gap: 16px;
	grid-template-columns: auto minmax(0, 1fr);
	padding: 0 0 24px;
	position: relative;
}

.border-tracking-events li > div {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	min-width: 0;
}

.border-tracking-events li:last-child {
	padding-bottom: 0;
}

.border-tracking-events li:not(:last-child)::after {
	background: var(--border-line);
	content: "";
	height: calc(100% - 16px);
	left: 6px;
	position: absolute;
	top: 19px;
	width: 1px;
}

.border-tracking-events strong,
.border-tracking-events time {
	display: block;
}

.border-tracking-events time {
	color: var(--border-muted);
	font-size: var(--border-text-xs);
	margin-top: 0;
	white-space: nowrap;
}

.border-tracking-events p {
	flex-basis: 100%;
	margin: 8px 0 0;
}

@media (min-width: 700px) {
	.border-tracking-now {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.border-order-meta {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.border-order-meta {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

.border-order-meta div {
	background: var(--border-bg);
	border: 1px solid var(--border-line);
	border-radius: 18px;
	padding: 16px;
}

.border-order-meta span,
.border-order-meta dt,
.border-progress-head span {
	color: var(--border-muted);
	display: block;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.08em;
	line-height: 1.2;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.border-order-meta strong,
.border-order-meta dd,
.border-progress-head strong {
	color: var(--border-text);
	display: block;
	font-size: var(--border-text-md);
	font-weight: var(--border-weight-bold);
	line-height: 1.2;
}

.border-order-meta dt,
.border-order-meta dd {
	margin: 0;
}

.border-progress-card {
	box-shadow: none;
	padding: 20px;
}

.border-progress-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 14px;
}

.border-progress-head span {
	margin-bottom: 0;
}

.border-order-progress,
.border-progress {
	background: var(--border-line);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
	width: 100%;
}

.border-order-progress span,
.border-progress span {
	background: var(--border-accent);
	border-radius: inherit;
	display: block;
	height: 100%;
}

.border-timeline,
.border-order-timeline {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.border-timeline-item,
.border-status-item {
	position: relative;
}

.border-status-stage {
	align-items: flex-start;
	box-shadow: none;
	display: grid;
	gap: 16px;
	grid-template-columns: auto minmax(0, 1fr);
	padding: 20px;
}

.border-status-stage .border-status-label {
	color: var(--border-text);
	margin-bottom: 6px;
}

.border-status-stage .border-muted {
	font-size: var(--border-text-base);
	line-height: var(--border-leading-copy);
	margin-bottom: 0;
}

.border-status-history {
	display: grid;
	gap: 10px;
	margin-top: 12px;
}

.border-status-history-entry {
	background: var(--border-bg);
	border: 1px solid var(--border-line);
	border-radius: 14px;
	padding: 12px;
}

.border-status-history-entry time {
	color: var(--border-muted);
	display: block;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.08em;
	line-height: 1.2;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.border-status-history-entry p {
	color: var(--border-text);
	font-size: var(--border-text-meta);
	line-height: var(--border-leading-copy);
	margin-bottom: 0;
}

.border-stage-dot {
	border-radius: 50%;
	height: 14px;
	margin-top: 3px;
	width: 14px;
}

.border-stage-dot--completed {
	background: var(--border-success-mark);
	box-shadow: 0 0 0 7px rgba(var(--border-success-mark-rgb), 0.12);
}

.border-stage-dot--active {
	background: var(--border-accent);
	box-shadow: 0 0 0 7px rgba(var(--border-accent-rgb), 0.14);
}

@keyframes border-status-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(var(--border-accent-rgb), 0.22);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(var(--border-accent-rgb), 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(var(--border-accent-rgb), 0);
	}
}

.border-status-dot.is-active,
.border-stage-dot--active {
	animation: border-status-pulse 1.8s ease-out infinite;
}

/* Hero "live" dot (Ukraine ↔ EU): solid core + steady halo (base box-shadow)
   plus a radiating ring via ::after, for a calm living pulse. */
.border-status-dot--live {
	position: relative;
}

.border-status-dot--live::after {
	border-radius: 50%;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	animation: border-status-ping 2s ease-out infinite;
}

@keyframes border-status-ping {
	0% {
		box-shadow: 0 0 0 0 rgba(var(--border-accent-rgb), 0.35);
	}

	70% {
		box-shadow: 0 0 0 12px rgba(var(--border-accent-rgb), 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(var(--border-accent-rgb), 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.border-status-dot--live::after,
	.border-status-dot.is-active,
	.border-stage-dot--active {
		animation: none;
	}
}

.border-stage-dot--pending {
	background: transparent;
	border: 2px solid rgba(var(--border-muted-rgb), 0.34);
	box-shadow: none;
}

.border-timeline-item--active .border-status-stage,
.border-status-item--active .border-status-stage {
	border-color: rgba(var(--border-accent-rgb), 0.34);
}

.border-timeline-item--pending .border-status-stage,
.border-status-item--pending .border-status-stage {
	background: color-mix(in srgb, var(--border-bg-soft) 66%, transparent);
}

.border-timeline-item--pending .border-status-label,
.border-timeline-item--pending .border-muted,
.border-status-item--pending .border-status-label,
.border-status-item--pending .border-status-meta {
	color: var(--border-muted);
}

.border-status-item--completed .border-status-meta {
	color: var(--border-success);
}

.border-status-item--active .border-status-meta {
	color: var(--border-accent);
}

.border-order-details h3 {
	margin-bottom: 18px;
}

.border-order-meta--details {
	margin: 0;
}

.border-order-cta {
	margin-top: 0;
}

.border-order-cta > div {
	gap: 10px;
}

.border-content .border-order-cta .border-section-title,
.border-content .border-order-cta .border-muted {
	margin: 0;
}

.border-pwa-install {
	background: color-mix(in srgb, var(--border-bg-soft) 82%, transparent);
	box-shadow: 0 10px 30px rgba(var(--border-shadow-rgb), 0.06);
	min-height: 46px;
	padding: 12px 18px;
}

.border-pwa-install[hidden] {
	display: none;
}

.border-pwa-install-wrap {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.border-pwa-ios-note {
	background: color-mix(in srgb, var(--border-bg-soft) 82%, transparent);
	border: 1px solid var(--border-line);
	border-radius: 999px;
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-medium);
	margin: 0;
	padding: 12px 16px;
}

.border-pwa-ios-note[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.border-page {
		padding: 64px 0;
	}

	/* Keep the compact notice proportions on wide screens too: it is context,
	   not a second header. */
	.border-page-infobox-shell {
		padding: 8px 0;
	}

	.border-page-infobox {
		font-size: var(--border-text-sm);
		gap: 12px;
		line-height: 20px;
	}

	.border-page-infobox-icon,
	.border-page-infobox-dismiss {
		border-radius: 9px;
		flex-basis: 28px;
		height: 28px;
	}

	.border-page-infobox-icon svg {
		height: 16px;
		width: 16px;
	}


	.border-container {
		padding-left: var(--border-page-gutter);
		padding-right: var(--border-page-gutter);
	}

	body .wpb_raw_code.wpb_raw_html,
	body .wpb_text_column:not(:has(.border-page)) {
		padding-left: 32px;
		padding-right: 32px;
	}

	.border-hero {
		gap: clamp(18px, 3vh, 32px);
		padding: 0 0 64px;
	}

	.border-card {
		padding: 32px;
	}

	/* FAQ owns its inner spacing on the summary and answer. The generic desktop
	   card padding would otherwise double the closed row's height. */
	.border-faq-item {
		padding: 0;
	}

	.border-direction-card {
		padding: 40px;
	}

	.border-step-card-top {
		min-height: 120px;
	}

	.border-step-illustration {
		height: 120px;
		width: 120px;
	}

	.border-step-illustration-set {
		flex-basis: 120px;
		height: 120px;
		width: 120px;
	}

	.border-grid {
		gap: 24px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.border-section {
		padding: 64px 0;
	}

	.border-section-header {
		/* Stay stacked on desktop too: description sits directly under the
		   title (no two-column row), consistent with section + form headers. */
		gap: 12px;
		margin-bottom: 28px;
	}

	.border-actions {
		flex-direction: row;
		width: auto;
	}

	.border-actions .border-button,
	.border-actions .border-button-secondary {
		width: auto;
	}

	.border-source-grid {
		gap: 12px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.border-sources-section .border-section-header {
		margin-bottom: 20px;
	}

	.border-source {
		font-size: var(--border-text-lg);
	}

	.border-status-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.border-order-timeline {
		grid-template-columns: 1fr;
	}

	.border-final-cta {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		padding: 56px 0 8px;
	}

	.border-become-intro {
		gap: 64px;
		padding: 12px 0 80px;
	}

	.border-become-intro-hero {
		max-width: 840px;
	}

	.border-become-intro-hero-actions {
		align-items: center;
		flex-direction: row;
		max-width: none;
	}

	.border-become-intro-role {
		min-height: 320px;
		padding: 48px;
	}

	.border-become-intro-fit {
		padding: 40px;
	}

	.border-become-intro-fit ul {
		gap: 28px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.border-become-intro-step-grid {
		gap: 18px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.border-become-intro-step-grid .border-card {
		min-height: 190px;
		padding: 32px;
	}

	.border-become-intro-cta {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		padding: 40px;
	}

	.border-become-intro-actions {
		justify-content: flex-end;
		margin-top: 0;
	}

	.border-home-status-top {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	body .wpb_raw_code.wpb_raw_html:has(.border-request-wrap) {
		padding-top: 64px;
	}

	.border-request-wrap {
		padding: 0 0 48px;
	}

	.border-form-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.border-form-footer {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	.border-request-success-actions {
		align-items: center;
		flex-direction: row;
	}

	.border-request-success-actions .border-button,
	.border-request-success-actions .border-button-secondary {
		width: auto;
	}

	.border-contact-buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.border-contact-buttons .border-button-secondary {
		width: auto;
	}

	.border-submit-button {
		margin-left: auto;
		width: auto;
	}

	.border-order-status {
		gap: 22px;
		padding: 48px 0;
	}

	.border-order-summary {
		align-items: flex-end;
		flex-direction: row;
		justify-content: space-between;
	}

	.border-order-meta {
		grid-template-columns: repeat(2, minmax(160px, 1fr));
		min-width: 420px;
	}

	.border-order-meta--details {
		min-width: 0;
	}

	.border-timeline,
	.border-order-timeline {
		gap: 0;
	}

	.border-timeline-item,
	.border-status-item {
		padding-left: 28px;
	}

	.border-timeline-item::before,
	.border-status-item::before {
		background: var(--border-line);
		bottom: -1px;
		content: "";
		left: 6px;
		position: absolute;
		top: 0;
		width: 2px;
	}

	.border-timeline-item:last-child::before,
	.border-status-item:last-child::before {
		display: none;
	}

	.border-status-stage {
		margin-bottom: 14px;
	}

	.border-stage-dot {
		left: 0;
		position: absolute;
		top: 24px;
		z-index: 1;
	}

	.border-tracking-events .border-stage-dot {
		left: auto;
		position: static;
		top: auto;
		z-index: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.border-status-dot.is-active,
	.border-stage-dot--active {
		animation: none;
	}
}

@media (min-width: 1024px) {
	.border-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.border-grid-two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.border-grid-four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Front-end manager dashboard
   ----------------------------------------------------------------------- */

.border-manager {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0 auto;
	max-width: none;
	padding: 24px 0 40px;
	width: 100%;
}

.border-manager-header {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 14px;
	justify-content: space-between;
}

.border-manager-header .border-section-title {
	margin-bottom: 0;
}

.border-manager-header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

.border-manager-header-actions .border-button,
.border-manager-header-actions .border-button-secondary {
	flex: 1 1 auto;
	justify-content: center;
}

.border-manager-count {
	align-items: center;
	background: var(--border-accent);
	border-radius: 999px;
	color: var(--border-on-ink);
	display: inline-flex;
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-bold);
	justify-content: center;
	line-height: 1;
	margin-left: 10px;
	min-width: 28px;
	padding: 6px 10px;
	vertical-align: middle;
}

.border-manager-tag-new {
	align-items: center;
	background: var(--border-accent);
	border-radius: 999px;
	color: var(--border-on-ink);
	display: inline-flex;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-bold);
	letter-spacing: 0.08em;
	line-height: 1;
	padding: 6px 10px;
}

.border-manager-row--new {
	border-color: rgba(var(--border-accent-rgb), 0.34);
	box-shadow: inset 4px 0 0 var(--border-accent);
}

.border-manager-row--overdue { border-color: rgba(var(--border-danger-edge-rgb), 0.35); }
.border-priority-badge,
.border-waiting-badge,
.border-callback-badge,
.border-overdue-badge {
	border: 1px solid var(--border-line);
	border-radius: 999px;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	padding: 6px 10px;
	text-transform: uppercase;
}
.border-priority-badge--high { color: var(--border-warning); border-color: rgba(var(--border-warning-rgb), 0.32); }
.border-priority-badge--urgent,
.border-overdue-badge { color: var(--border-danger-strong); border-color: rgba(var(--border-danger-strong-rgb), 0.32); }
.border-callback-badge { color: var(--border-accent); border-color: rgba(var(--border-accent-rgb), 0.32); }
/* Money that has not arrived: something to chase, not something broken —
   quieter than overdue, louder than the rest of the row. */
.border-waiting-badge { color: var(--border-warning); border-color: rgba(var(--border-warning-rgb), 0.38); }
.border-manager-checkbox { align-items: center; display: flex; flex-direction: row; gap: 10px; }
.border-manager-checkbox input { width: auto; }
.border-manager-next-action { max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.border-manager-toolbar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	max-width: none;
}

.border-page .border-manager-filter-toggle {
	justify-content: space-between;
	width: 100%;
}

.border-manager-filter-toggle::after {
	content: "+";
	font-size: 20px;
	font-weight: var(--border-weight-regular);
	line-height: 1;
}

.border-manager-filter-toggle[aria-expanded="true"] {
	background: var(--border-text);
	border-color: var(--border-text);
	color: var(--border-on-ink);
}

.border-manager-filter-toggle[aria-expanded="true"]::after {
	content: "−";
}

.border-manager-filter-count {
	align-items: center;
	background: var(--border-accent);
	border-radius: 999px;
	color: var(--border-on-ink);
	display: inline-flex;
	font-size: var(--border-text-xs);
	height: 24px;
	justify-content: center;
	min-width: 24px;
	padding: 0 7px;
}

.border-manager-filters {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
	min-width: 0;
}

/* The filter panel slides instead of appearing. Gated on .border-ui-ready so a
   visitor without JavaScript still gets the filters open and usable — and so
   the collapse is already in place at first paint rather than flashing. */
.border-ui-ready .border-manager-filters-reveal {
	display: grid;
	grid-template-rows: 1fr;
	transition:
		grid-template-rows var(--border-reveal-duration) var(--border-reveal-ease),
		opacity calc(var(--border-reveal-duration) * 0.75) var(--border-reveal-ease);
}

.border-ui-ready .border-manager-filters-reveal > * {
	min-height: 0;
	overflow: hidden;
}

.border-ui-ready .border-manager-filters-reveal:not(.is-open) {
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
	transition:
		grid-template-rows var(--border-reveal-duration) var(--border-reveal-ease),
		opacity calc(var(--border-reveal-duration) * 0.75) var(--border-reveal-ease);
}

.border-manager-toolbar-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.border-manager-stats {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.border-manager-stats .border-card {
	box-shadow: none;
	padding: 16px;
}

.border-manager-stats span {
	color: var(--border-muted);
	display: block;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.06em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.border-manager-stats strong {
	font-size: var(--border-text-lg);
}

.border-notification-health {
	align-items: center;
	background: rgba(var(--border-accent-rgb), 0.07);
	border: 1px solid rgba(var(--border-accent-rgb), 0.18);
	border-radius: 16px;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--border-text-meta);
	gap: 8px 16px;
	padding: 12px 16px;
}

.border-notification-health--warning {
	background: rgba(var(--border-danger-strong-rgb), 0.06);
	border-color: rgba(var(--border-danger-strong-rgb), 0.22);
}

.border-manager-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.border-manager-pagination .page-numbers {
	align-items: center;
	background: var(--border-bg);
	border: 1px solid var(--border-line);
	border-radius: 999px;
	color: var(--border-text);
	display: inline-flex;
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-semibold);
	justify-content: center;
	min-height: 42px;
	min-width: 42px;
	padding: 8px 14px;
	text-decoration: none;
}

.border-manager-pagination .page-numbers.current {
	background: var(--border-text);
	color: var(--border-on-ink);
}

.border-manager-list {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

.border-manager-row {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 20px;
	text-decoration: none;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.border-manager-row:hover,
.border-manager-row:focus-visible {
	border-color: rgba(var(--border-accent-rgb), 0.34);
	box-shadow: var(--border-shadow), var(--border-lift);
	transform: translateY(-1px);
}

.border-manager-row-main {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	width: 100%;
}

.border-manager-row-heading {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.border-manager-row-badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.border-manager-row-code {
	color: var(--border-text);
	font-size: var(--border-text-base);
	font-weight: var(--border-weight-bold);
	overflow-wrap: anywhere;
}

.border-manager-row-dir {
	color: var(--border-muted);
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-medium);
}

.border-manager-row-meta {
	align-items: center;
	color: var(--border-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--border-text-meta);
	gap: 8px 16px;
	min-width: 0;
	width: 100%;
}

.border-manager-row-meta > span {
	overflow-wrap: anywhere;
}

.border-manager-row-meta time {
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.04em;
}

.border-status-badge {
	align-items: center;
	border: 1px solid var(--border-line);
	border-radius: 999px;
	display: inline-flex;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 7px 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

.border-status-badge--new {
	background: rgba(var(--border-muted-rgb), 0.1);
	border-color: rgba(var(--border-muted-rgb), 0.24);
	color: var(--border-muted);
}

.border-status-badge--active {
	background: rgba(var(--border-accent-rgb), 0.1);
	border-color: rgba(var(--border-accent-rgb), 0.28);
	color: var(--border-accent);
}

.border-status-badge--done {
	background: rgba(var(--border-success-mark-rgb), 0.12);
	border-color: rgba(var(--border-success-mark-rgb), 0.26);
	color: var(--border-success);
}

.border-status-badge--cancelled {
	background: rgba(var(--border-danger-wash-rgb), 0.1);
	border-color: rgba(var(--border-danger-wash-rgb), 0.26);
	color: var(--border-danger);
}

.border-manager-trackline {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px;
}

.border-manager-trackline span {
	font-size: var(--border-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.border-manager-trackline .border-manager-customer-detail {
	color: var(--border-muted);
	font-size: var(--border-text-meta);
	letter-spacing: 0;
	text-transform: none;
}

.border-manager-payment-status {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.border-manager-trackline a {
	color: var(--border-accent);
	font-weight: var(--border-weight-semibold);
}

/* The customer, on one line where there is room: name, address, number, and
   whether either is confirmed. It wraps on a narrow screen instead of shrinking,
   because a phone number broken across two lines cannot be dialled from. */
.border-manager-customer-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	width: 100%;
}

.border-manager-customer-item {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
}

/* .border-manager-trackline styles its spans as small uppercase kickers; the
   contacts inside this row are values, not labels. */
.border-manager-trackline .border-manager-customer-row span {
	font-size: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.border-manager-customer-row a {
	color: inherit;
	font-weight: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.border-verified {
	align-items: center;
	border-radius: 999px;
	display: inline-flex;
	font-size: var(--border-text-meta);
	font-weight: var(--border-weight-semibold);
	gap: 4px;
	line-height: 1;
	padding: 4px 8px;
	white-space: nowrap;
}

.border-verified.is-yes {
	background: rgba(var(--border-success-mark-rgb), 0.14);
	color: var(--border-success);
}

.border-verified.is-no {
	background: rgba(var(--border-warning-rgb), 0.14);
	color: var(--border-warning);
}

.border-manager-track-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

.border-manager-track-actions .border-button-secondary {
	color: var(--border-text);
	justify-content: center;
}

.border-manager-track-actions .border-copy-state {
	flex-basis: 100%;
}

/* Resending a receipt is an address and a button: the address leads, because
   the usual reason to resend is that the first one was wrong. */
/* The customer is holding a different figure to the one this page would charge:
   the one payment state a manager has to act on rather than just read. */
.border-manager-trackline .border-manager-invoice-stale {
	color: var(--border-warning);
	font-weight: var(--border-weight-semibold);
}

.border-manager-receipt-resend {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
}

.border-manager-receipt-resend .border-field {
	flex: 1 1 220px;
}

.border-manager-receipt-resend .border-button-secondary {
	color: var(--border-text);
}

.border-manager-form .border-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.border-manager--locked {
	justify-content: center;
	min-height: min(680px, calc(100dvh - 190px));
}

.border-manager-login-card {
	padding: clamp(24px, 5vw, 56px);
}

.border-manager-login-inner {
	display: grid;
	gap: 24px;
	max-width: 560px;
}

.border-manager-login-inner .border-section-title,
.border-manager-login-inner .border-kicker,
.border-manager-login-inner .border-form-notice {
	margin-bottom: 0;
}

.border-manager-login-form {
	gap: 16px;
}

.border-manager-login-remember {
	align-items: center;
	color: var(--border-muted);
	cursor: pointer;
	display: flex;
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-medium);
	gap: 10px;
}

.border-manager-login-remember input {
	accent-color: var(--border-text);
	height: 20px;
	margin: 0;
	width: 20px;
}

.border-manager-login-form .border-submit-button {
	margin-left: 0;
	width: 100%;
}

@media (max-width: 767px) {
	/* The WordPress toolbar consumes 46px and breaks the app shell on phones.
	   Manager actions remain available through the explicit WP Admin button. */
	html:has(.border-manager) {
		margin-top: 0 !important;
	}

	body:has(.border-manager) #wpadminbar {
		display: none !important;
	}

	.border-manager {
		gap: 16px;
		padding-top: 16px;
	}

	.border-manager--locked {
		min-height: calc(100dvh - 127px);
		padding-bottom: max(24px, env(safe-area-inset-bottom));
	}

	.border-manager-header-actions .border-button,
	.border-manager-header-actions .border-button-secondary {
		min-height: 48px;
	}

	.border-manager-stats {
		gap: 8px;
	}

	.border-manager-stats .border-card {
		border-radius: 18px;
		min-height: 82px;
	}

	.border-notification-health {
		align-items: flex-start;
		flex-direction: column;
	}

	.border-manager-row {
		min-height: 148px;
		padding: 16px;
		position: relative;
	}

	.border-manager-row::after {
		color: var(--border-faint);
		content: "→";
		font-size: 20px;
		position: absolute;
		right: 16px;
		top: 16px;
	}

	.border-manager-row-heading {
		padding-right: 32px;
	}

	.border-manager-row-meta {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.border-manager-next-action {
		max-width: 100%;
	}

	.border-manager--detail > .border-manager-header > .border-button-secondary {
		justify-content: center;
		width: 100%;
	}

	.border-manager-form .border-form-footer {
		background: var(--border-bg-soft);
		border: 1px solid var(--border-line);
		border-radius: 18px;
		bottom: max(12px, env(safe-area-inset-bottom));
		box-shadow: 0 12px 32px rgba(var(--border-shadow-rgb), 0.14);
		padding: 12px;
		position: sticky;
		z-index: 10;
	}

	.border-manager--detail {
		padding-bottom: calc(104px + env(safe-area-inset-bottom));
	}

	.border-manager-form {
		scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom));
	}

	.border-manager-form .border-field,
	.border-manager-form :where(input, select, textarea) {
		scroll-margin-bottom: calc(120px + env(safe-area-inset-bottom));
	}

	.border-field > span,
	.border-field-head > span {
		letter-spacing: 0;
		text-transform: none;
	}

	.border-manager-track-actions .border-button-secondary {
		flex: 1 1 0;
	}

	.border-manager-form .border-form-footer .border-form-state {
		display: none;
	}

	.border-manager-toolbar-actions .border-button,
	.border-manager-toolbar-actions .border-button-secondary {
		flex: 1 1 0;
		justify-content: center;
	}
}

@media (min-width: 768px) {
	.border-manager-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.border-manager-header {
		align-items: flex-end;
		flex-direction: row;
	}

	.border-manager-header-actions {
		width: auto;
	}

	.border-manager-header-actions .border-button,
	.border-manager-header-actions .border-button-secondary {
		flex: 0 0 auto;
	}

	.border-manager-row {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	.border-manager-filters {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.border-manager-row-main {
		align-items: center;
		flex: 1 1 auto;
		flex-direction: row;
	}

	.border-manager-row-heading {
		flex: 1 1 260px;
	}

	.border-manager-row-badges {
		flex: 0 1 auto;
	}

	.border-manager-row-meta {
		flex: 0 1 42%;
		justify-content: flex-end;
		width: auto;
	}

	.border-manager-toolbar {
		gap: 16px;
	}

	.border-manager-toolbar-actions {
		grid-column: 1 / -1;
	}
}

/* ============================================================
   Typography system — one voice, and now literally one: e-Ukraine (the Diia
   typeface) sets everything, display accents included. Hierarchy is built with
   weight and size rather than with a second family.
   System-facing values use the same e-Ukraine family with tabular numbers.
   Mobile-first; Cyrillic + Latin.
   ============================================================ */

/* --- Base font assignment (human-facing default) --- */
.border-ui-font {
	font-family: var(--border-font-ui);
}

/* --- Technical values keep the shared family and tabular numerals. --- */
.border-mono,
.border-order-id,
.border-tracking-code,
.border-status-label,
.border-timestamp,
.border-micro-label {
	font-family: var(--border-font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* --- Order ID: BORD-A7K92Q / #000123 --- */
.border-order-id {
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.01em;
}

/* --- Tracking code --- */
.border-tracking-code {
	font-weight: var(--border-weight-semibold);
	letter-spacing: 0.04em;
}

/* --- Status labels: REQUESTED / CROSSING / DELIVERED --- */
.border-status-label {
	font-weight: var(--border-weight-medium);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- Timestamps: 14.06.2026 13:42 --- Mono 400 --- */
.border-timestamp {
	color: var(--border-muted);
	font-weight: var(--border-weight-regular);
	letter-spacing: 0.01em;
}

/* --- Micro labels: small technical captions --- Mono 400 --- */
.border-micro-label {
	color: var(--border-muted);
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-regular);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Visual hierarchy ---
   Hero, section titles, body and uppercase accents are all e-Ukraine;
   hierarchy comes from weight and size.
   e-Ukraine ships 400 / 500 / 700; tokens only use available files. */
.border-logo {
	font-family: var(--border-font-ui);
	font-weight: var(--border-weight-bold);
	letter-spacing: -0.01em;
}

.border-section-title {
	font-family: var(--border-font-ui);
	font-weight: var(--border-weight-bold);
	letter-spacing: -0.005em;
}

/* ============================================================
   Salient shell — header menu + footer in e-Ukraine.
   No mono here anymore: mono is reserved for codes/IDs only.
   Scoped to Salient shell IDs; !important only to win over
   Salient's own nav/footer font rules (core files untouched).
   ============================================================ */

/* --- Header navigation (desktop, secondary + off-canvas) --- */
#header-outer #top nav .sf-menu > li > a,
#header-outer #top nav .sf-menu > li > a .menu-title-text,
#header-outer #top nav .sf-menu ul li a,
#header-secondary-outer #top nav .sf-menu > li > a,
#slide-out-widget-area .inner .menu li > a,
#slide-out-widget-area .off-canvas-menu-container li > a,
#slide-out-widget-area .menu-title-text {
	font-family: var(--border-font-ui) !important;
	font-weight: var(--border-weight-medium) !important;
}

/* --- Footer: all e-Ukraine --- */
#footer-outer,
#footer-outer p,
#footer-outer .widget,
#footer-outer .widget p,
#footer-outer li,
#footer-outer #copyright,
#footer-outer #copyright p,
#footer-outer nav .menu li a,
#footer-outer .social li a {
	font-family: var(--border-font-ui) !important;
}

#footer-outer .widget-title {
	font-weight: var(--border-weight-medium);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* BORDER standalone theme shell. */
html {
	scroll-behavior: smooth;
}

body.border-theme {
	background: var(--border-bg);
	color: var(--border-text);
	margin: 0;
}

body.border-theme .border-container {
	box-sizing: border-box;
}

.border-site-header {
	background: var(--border-bg-soft);
	box-shadow: var(--border-header-shadow);
	position: sticky;
	top: 0;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	z-index: 30;
}

.border-site-header.is-condensed {
	box-shadow: var(--border-header-shadow-condensed);
}

.border-site-header-inner {
	align-items: center;
	display: flex;
	min-height: 86px;
	position: relative;
	transition: min-height 0.38s cubic-bezier(0.3, 1, 0.3, 1);
}

.border-site-header.is-condensed .border-site-header-inner {
	min-height: 64px;
}

.border-site-brand {
	align-items: center;
	color: var(--border-text);
	display: inline-flex;
	font-family: var(--border-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0;
	left: var(--border-page-gutter);
	position: absolute;
	text-decoration: none;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.border-site-logo {
	display: block;
	height: 28px;
	max-width: 180px;
	transform: rotate(var(--border-logo-rotation, 0deg));
	transform-origin: 50% 50%;
	transition: height 0.38s cubic-bezier(0.3, 1, 0.3, 1);
	width: auto;
}

.border-site-header.is-condensed .border-site-logo {
	height: 24px;
}

.border-site-nav {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.border-header-tracking-form {
	margin: 0;
	padding: 0;
}

.border-header-tracking-control {
	align-items: center;
	background: var(--border-bg);
	border: 1px solid var(--border-line);
	border-radius: 999px;
	box-sizing: border-box;
	display: flex;
	height: 40px;
	padding: 3px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, height 0.38s cubic-bezier(0.3, 1, 0.3, 1);
	width: clamp(232px, 26vw, 286px);
}

.border-header-tracking-form input {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--border-text);
	flex: 1 1 auto;
	font-family: inherit;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-medium);
	height: 100%;
	min-width: 0;
	padding: 0 11px;
	width: 100%;
}

.border-header-tracking-form input::placeholder {
	color: var(--border-muted);
	opacity: 1;
}

.border-header-tracking-form input:focus-visible {
	outline: 0;
}

.border-header-tracking-control:hover {
	border-color: var(--border-text);
}

.border-header-tracking-control:focus-within {
	border-color: var(--border-accent);
	box-shadow: 0 0 0 3px rgba(var(--border-accent-rgb), 0.16);
}

.border-header-tracking-form button {
	align-items: center;
	background: var(--border-text);
	border: 1px solid var(--border-text);
	border-radius: 999px;
	color: var(--border-bg-soft);
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: inherit;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-bold);
	gap: 6px;
	height: 100%;
	justify-content: center;
	padding: 0 14px;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

.border-header-tracking-form button .border-export-fa {
	font-size: 13px;
	margin: 0;
}

.border-header-tracking-form button:hover,
.border-header-tracking-form button:focus-visible {
	background: var(--border-accent);
	border-color: var(--border-accent);
	color: var(--border-bg-soft);
	outline: 0;
}

.border-site-header.is-condensed .border-header-tracking-control {
	height: 34px;
	padding: 2px;
}

/* The support number and compact controls make the right side denser on a
   laptop. A small optical shift leaves air between both header groups. */
@media (min-width: 1000px) and (max-width: 1199px) {
	.border-site-nav {
		left: 45.5%;
	}
}

.border-export-fa,
.border-export-user {
	display: inline-block;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

.border-export-fa {
	font-family: 'BORDER FontAwesome';
	font-size: 14px;
	margin-right: 7px;
}

.border-export-fa--basket::before {
	content: '\f291';
}

.border-export-fa--map::before {
	content: '\f277';
}

.border-export-fa--home::before {
	content: '\f015';
}

.border-export-fa--close {
	margin-right: 0;
}

.border-export-fa--close::before {
	content: '\f00d';
}

.border-export-fa--chevron-down::before {
	content: '\f107';
}

.border-export-user {
	font-family: 'BORDER Salient Icons';
	font-size: 20px;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.border-export-user::before {
	content: '\e074';
}

.border-header-tools {
	align-items: center;
	display: flex;
	gap: 2px;
	position: absolute;
	right: var(--border-page-gutter);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.border-language-menu {
	position: relative;
}

/* The closed control belongs to the row it sits in: the same 44px box and the
   same ink as the icons beside it. At 30px and muted it read as a caption
   rather than a control — the shortest and palest thing in the header. */
.border-language-menu-toggle {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--border-text);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 12px;
	font-weight: var(--border-weight-semibold);
	gap: 4px;
	height: 44px;
	justify-content: center;
	letter-spacing: 0.04em;
	min-width: 44px;
	padding: 0 6px;
	text-decoration: none;
}

.border-language-menu-toggle:hover,
.border-language-menu-toggle:focus-visible,
.border-language-menu-toggle[aria-expanded="true"] {
	color: var(--border-accent);
	outline: 0;
}

.border-language-menu-toggle .border-export-fa {
	font-size: 10px;
	margin: 0;
	transition: transform var(--border-reveal-duration) var(--border-reveal-ease);
}

.border-language-menu-toggle[aria-expanded="true"] .border-export-fa {
	transform: rotate(180deg);
}

/* Opened with the site's one technique — a grid row grown from nothing — so a
   fifth language lengthens the list without anyone touching a height. */
.border-language-menu-list {
	background: var(--border-bg-soft);
	border: 1px solid var(--border-line);
	border-radius: 12px;
	box-shadow: var(--border-header-shadow-condensed);
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	transition: grid-template-rows var(--border-reveal-duration) var(--border-reveal-ease), opacity var(--border-reveal-duration) var(--border-reveal-ease);
	width: max-content;
	z-index: 5;
}

.border-language-menu-list.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
	pointer-events: auto;
}

.border-language-menu-items {
	display: grid;
	gap: 2px;
	min-height: 0;
	min-width: 168px;
	overflow: hidden;
	padding: 5px;
	transition: padding-block var(--border-reveal-duration) var(--border-reveal-ease);
}

/* A clipper cannot clip its own padding, so the closed list kept ten
   transparent pixels. Collapsing the padding with the row makes closed mean
   closed. */
.border-language-menu-list:not(.is-open) .border-language-menu-items {
	padding-block: 0;
}

.border-language-menu-list a {
	align-items: center;
	border-radius: 8px;
	color: var(--border-muted);
	display: flex;
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-medium);
	gap: 10px;
	justify-content: space-between;
	min-height: 38px;
	padding: 0 12px;
	text-decoration: none;
}

.border-language-menu-list a:hover,
.border-language-menu-list a:focus-visible {
	background: var(--border-bg-muted);
	color: var(--border-text);
	outline: 0;
}

/* The language you are in is marked, not merely tinted: with four of them a
   highlight alone is read as a hover that got stuck. */
.border-language-menu-list a[aria-current="page"] {
	color: var(--border-text);
}

.border-language-menu-check {
	border-bottom: 1.6px solid currentColor;
	border-right: 1.6px solid currentColor;
	flex: 0 0 auto;
	height: 9px;
	opacity: 0;
	rotate: 45deg;
	width: 5px;
}

.border-language-menu-list a[aria-current="page"] .border-language-menu-check {
	opacity: 1;
}

/* Colour scheme. The header is a quick binary switch; the menu names every
   choice and exposes the way back to following the device setting. */
/* The theme control is an icon button like the account one beside it, not a
   switch: a filled track was the only solid shape in a row of bare glyphs and
   outline pills, which made the least important control up there the loudest.
   Sizing comes from .border-header-icon; this adds only the stacking the two
   glyphs need to trade places. */
.border-theme-toggle {
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	position: relative;
}

/* Both glyphs sit in the same place and one of them is showing. Opacity rather
   than display, so the swap can be a fade and not a jump. */
.border-theme-icon {
	display: block;
	height: 19px;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.7);
	transition: opacity var(--border-reveal-duration) var(--border-reveal-ease), transform var(--border-reveal-duration) var(--border-reveal-ease);
	width: 19px;
}

/* The glyph names the theme you would get, not the one you are in. */
.border-theme-toggle[aria-checked="false"] .border-theme-icon--moon,
.border-theme-toggle[aria-checked="true"] .border-theme-icon--sun {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.border-theme-toggle:hover {
	color: var(--border-accent);
}

.border-theme-toggle-label {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}


.border-header-icon {
	align-items: center;
	background: transparent;
	border: 0;
	box-sizing: border-box;
	color: var(--border-text);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: color 0.2s ease, height 0.38s cubic-bezier(0.3, 1, 0.3, 1);
	width: 44px;
}

@media (min-width: 1000px) {
	.border-menu-toggle {
		display: none;
	}
}

.border-header-track {
	display: none;
	text-transform: uppercase;
}

.border-header-track .border-export-fa {
	font-size: 17px;
	margin-right: 0;
}

.border-site-header.is-condensed .border-header-icon {
	height: 40px;
}

.border-header-icon:hover,
.border-header-icon:focus-visible {
	color: var(--border-accent);
}

.border-export-menu-lines,
.border-export-menu-lines::before,
.border-export-menu-lines::after {
	background: currentColor;
	display: block;
	height: 2px;
	position: absolute;
	width: 18px;
}

.border-export-menu-lines {
	position: relative;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.border-export-menu-lines::before,
.border-export-menu-lines::after {
	content: '';
	left: 0;
	transform-origin: 50% 50%;
	transition: top 0.4s 0.45s ease, transform 0.3s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.border-export-menu-lines::before {
	top: -6px;
}

.border-export-menu-lines::after {
	top: 6px;
}

.border-menu-toggle[aria-expanded="true"] .border-export-menu-lines {
	background: transparent;
}

.border-menu-toggle[aria-expanded="true"] .border-export-menu-lines::before,
.border-menu-toggle[aria-expanded="true"] .border-export-menu-lines::after {
	top: 0;
	transition: top 0.4s ease, transform 0.3s 0.45s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.border-menu-toggle[aria-expanded="true"] .border-export-menu-lines::before {
	transform: rotate(45deg);
}

.border-menu-toggle[aria-expanded="true"] .border-export-menu-lines::after {
	transform: rotate(-45deg);
}

.border-menu-overlay {
	background: var(--border-scrim);
	inset: 0;
	opacity: 0;
	position: fixed;
	transition: opacity 0.35s ease;
	z-index: 40;
}

.border-menu-overlay.is-visible {
	opacity: 1;
}

.border-offcanvas-menu {
	background: var(--border-ink-surface);
	box-sizing: border-box;
	height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 116px 48px 48px;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(100%);
	transition: transform 0.47s cubic-bezier(0.3, 1, 0.3, 0.95);
	width: min(420px, 100%);
	z-index: 41;
}

.border-offcanvas-menu.is-open {
	transform: translateX(0);
}

.border-offcanvas-close {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--border-on-ink-surface);
	cursor: pointer;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 44px;
}

.border-offcanvas-close .border-export-fa {
	font-size: 18px;
}

.border-offcanvas-menu nav {
	display: grid;
	gap: 8px;
}

/* A column of names rather than a row of chips: two codes read as a pair, four
   read as initials, and the names are what somebody is actually looking for.
   A column also takes a fifth language without rewrapping. */
.border-offcanvas-menu .border-offcanvas-language-switcher {
	display: grid;
	gap: 2px;
	margin-top: 32px;
}

.border-offcanvas-menu .border-offcanvas-language-switcher a {
	align-items: center;
	border: 0;
	border-radius: 10px;
	color: rgba(var(--border-on-ink-surface-rgb), 0.68);
	display: flex;
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-medium);
	gap: 10px;
	justify-content: space-between;
	min-height: 44px;
	padding: 0 12px;
}

.border-offcanvas-menu .border-offcanvas-language-switcher a[aria-current="page"] {
	background: rgba(var(--border-on-ink-surface-rgb), 0.08);
	color: var(--border-on-ink-surface);
}

.border-offcanvas-theme {
	border-top: 1px solid rgba(var(--border-on-ink-surface-rgb), 0.16);
	margin-top: 28px;
	padding-top: 28px;
}

.border-theme-picker {
	border: 0;
	margin: 0;
	min-width: 0;
	padding: 0;
	width: 100%;
}

.border-theme-picker legend {
	color: var(--border-on-ink-surface);
	font-size: var(--border-text-base);
	font-weight: var(--border-weight-medium);
	line-height: var(--border-leading-body);
	margin-bottom: 12px;
	padding: 0;
}

.border-theme-picker-options {
	background: rgba(var(--border-on-ink-surface-rgb), 0.08);
	border: 1px solid rgba(var(--border-on-ink-surface-rgb), 0.2);
	border-radius: 999px;
	display: grid;
	gap: 3px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 3px;
	width: 100%;
}

.border-theme-picker-option {
	cursor: pointer;
	display: block;
	min-width: 0;
	position: relative;
}

.border-theme-picker-option input {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.border-theme-picker-option span {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 999px;
	box-sizing: border-box;
	color: rgba(var(--border-on-ink-surface-rgb), 0.66);
	display: flex;
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-medium);
	height: 40px;
	justify-content: center;
	min-width: 0;
	padding: 0 9px;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
}

.border-theme-picker-option:hover span {
	color: var(--border-on-ink-surface);
}

.border-theme-picker-option input:checked + span {
	background: var(--border-bg-soft);
	border-color: var(--border-bg-soft);
	color: var(--border-text);
}

.border-theme-picker-option input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(var(--border-accent-rgb), 0.34);
	outline: 2px solid var(--border-accent);
	outline-offset: 2px;
}

.border-offcanvas-menu a {
	color: rgba(var(--border-on-ink-surface-rgb), 0.72);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.36;
	padding: 8px 0;
	text-decoration: none;
	transition: color 0.2s ease;
}

.border-offcanvas-menu a:hover,
.border-offcanvas-menu a:focus-visible {
	color: var(--border-on-ink-surface);
}

body.border-menu-open {
	overflow: hidden;
}

.border-site-footer {
	background: var(--border-ink-surface);
	border-top: 1px solid var(--border-footer-edge);
	color: rgba(var(--border-on-ink-surface-rgb), 0.64);
	font-size: var(--border-text-sm);
	padding: 64px 0 48px;
}

.border-footer-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}

.border-site-footer p,
.border-site-footer a {
	margin: 0;
}

.border-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Social links sit under the company details in the brand column. 44px targets:
   they are the smallest tap targets in the footer and the only icon-only ones. */
.border-social {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.border-social a {
	align-items: center;
	border: 1px solid rgba(var(--border-on-ink-surface-rgb), 0.18);
	border-radius: 12px;
	color: rgba(var(--border-on-ink-surface-rgb), 0.72);
	display: inline-flex;
	height: 44px;
	justify-content: center;
	transition: color 0.2s ease, border-color 0.2s ease;
	width: 44px;
}

.border-social a:hover,
.border-social a:focus-visible {
	border-color: rgba(var(--border-on-ink-surface-rgb), 0.4);
	color: var(--border-on-ink-surface);
}

.border-footer-company {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 12px;
}

.border-site-footer .border-footer-donation {
	align-items: center;
	align-self: flex-start;
	border: 1px solid rgba(var(--border-on-ink-surface-rgb), 0.24);
	border-radius: 999px;
	color: var(--border-on-ink-surface) !important;
	display: flex;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-semibold);
	gap: 8px;
	letter-spacing: 0.04em;
	margin-top: 30px;
	min-height: 44px;
	padding: 10px 14px;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.border-footer-donation:hover,
.border-footer-donation:focus-visible {
	background: rgba(var(--border-on-ink-surface-rgb), 0.12);
	border-color: rgba(var(--border-on-ink-surface-rgb), 0.5);
	color: var(--border-on-ink-surface);
}

.border-footer-donation-icon {
	flex: 0 0 auto;
}

.border-footer-logo {
	color: var(--border-on-ink-surface);
	font-family: var(--border-font-display);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.border-footer-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.border-footer-title {
	color: var(--border-on-ink-surface);
	font-size: var(--border-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin-bottom: 4px !important;
	text-transform: uppercase;
}

.border-footer-title--spaced {
	margin-top: 20px !important;
}

/* Store badges are not links — the apps do not exist yet — so they read as
   labels with a state, not as something that can be tapped. */
.border-store-badges,
.border-pay-marks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.border-pay-marks {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
}

.border-store-badge {
	align-items: center;
	border: 1px solid rgba(var(--border-on-ink-surface-rgb), 0.18);
	border-radius: 12px;
	display: flex;
	gap: 10px;
	padding: 8px 12px;
}

.border-store-badge-icon {
	align-items: center;
	color: rgba(var(--border-on-ink-surface-rgb), 0.82);
	display: inline-flex;
	flex: 0 0 auto;
}

.border-store-badge-name {
	color: rgba(var(--border-on-ink-surface-rgb), 0.82);
	flex: 1 1 auto;
	font-size: var(--border-text-sm);
}

.border-store-badge-soon {
	background: rgba(var(--border-on-ink-surface-rgb), 0.12);
	border-radius: 999px;
	color: rgba(var(--border-on-ink-surface-rgb), 0.72);
	flex: 0 0 auto;
	font-size: var(--border-text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 3px 8px;
	text-transform: uppercase;
}

/* Agency credit, below the columns and behind a hairline so it reads as a
   separate register rather than as part of the last column. The mark is already
   light, so it sits on the dark footer as drawn; the line dims until hovered so
   it stays a signature, not a fifth navigation item. Kept to the right, away
   from BORDER's own brand in the first column — the two identities should not
   look like one. */
.border-footer-credit {
	align-items: center;
	border-top: 1px solid rgba(var(--border-on-ink-surface-rgb), 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	margin-top: 40px;
	padding-top: 24px;
}

.border-footer-copyright {
	font-size: var(--border-text-xs);
	letter-spacing: 0.04em;
	opacity: 0.55;
}

.border-footer-credit-link {
	align-items: center;
	display: inline-flex;
	gap: 10px;
	font-size: var(--border-text-xs);
	letter-spacing: 0.04em;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.border-footer-credit-link:hover,
.border-footer-credit-link:focus-visible {
	opacity: 1;
}

.border-footer-credit img {
	display: block;
	flex: 0 0 auto;
	height: 28px;
	width: 28px;
}

@media (max-width: 999px) {
	.border-footer-credit {
		margin-top: 32px;
	}
}

.border-pay-mark {
	align-items: center;
	border: 1px solid rgba(var(--border-on-ink-surface-rgb), 0.18);
	border-radius: 10px;
	color: rgba(var(--border-on-ink-surface-rgb), 0.82);
	display: inline-flex;
	gap: 6px;
	font-size: var(--border-text-xs);
	padding: 6px 10px;
	white-space: nowrap;
}

.border-site-footer a {
	color: rgba(var(--border-on-ink-surface-rgb), 0.64);
	text-decoration: none;
	transition: color 0.2s ease;
}

.border-site-footer a:hover,
.border-site-footer a:focus-visible {
	color: var(--border-on-ink-surface);
}

.border-content {
	width: 100%;
}

.border-content--app {
	max-width: var(--border-salient-container);
}

.border-content--prose {
	max-width: calc(var(--border-reading-width) + (var(--border-page-gutter) * 2));
}

.border-content .border-section-title {
	margin: 0 0 28px;
}

/* The account's cards space themselves with a grid gap, so a title carrying its
   own 28px margin was adding to it rather than replacing it — 46px under a
   heading whose card is built on 18. The gap is the rhythm here; the margin
   steps out of its way. */
.border-account .border-section-title,
.border-account h3 {
	margin: 0;
}

@media (max-width: 999px) {
	/* The close matches the icon opposite it — two 28px chips either side of the
	   words, rather than one chip and one slab. The thumb still gets its full
	   44px: the target is grown by a transparent box that sits outside the
	   painted one and takes no part in layout, so the notice is 16px shorter
	   without the tap being 16px smaller. */
	.border-page-infobox-dismiss {
		position: relative;
	}

	.border-page-infobox-dismiss::after {
		content: '';
		inset: -8px;
		position: absolute;
	}

	/* The words set the height here, not the chrome around them: this message
	   needs 283px to fall in two lines and had 271. So the chrome gives its
	   width back — tighter gaps, and a gutter of its own narrower than the
	   page's, because a full-bleed band does not have to hold the column the
	   page below it does. A longer message will still take three lines, which
	   is right; what it will not do is take them because the close button was
	   sitting in the space. */
	.border-page-infobox {
		gap: 6px;
	}

	.border-page-infobox-shell {
		padding: 6px 0;
	}

	.border-page-infobox-shell .border-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.border-site-header-inner {
		min-height: 47px;
	}

	.border-site-header.is-condensed .border-site-header-inner {
		min-height: 47px;
	}

	.border-site-logo {
		height: 24px;
	}

	.border-site-nav {
		display: none;
	}

	.border-header-tools > .border-language-menu {
		display: none;
	}

	.border-header-tools > .border-theme-toggle--header {
		display: none;
	}

	.border-header-track {
		display: inline-flex;
	}

	.border-header-tools {
		right: var(--border-page-gutter);
	}

	.border-site-brand {
		left: var(--border-page-gutter);
	}

	.border-header-icon,
	.border-site-header.is-condensed .border-header-icon {
		height: 40px;
		width: 40px;
	}

	.border-header-track,
	.border-site-header.is-condensed .border-header-track {
		background: var(--border-bg-soft);
		border: 1px solid var(--border-line);
		border-radius: 999px;
		font-size: var(--border-text-xs);
		font-weight: var(--border-weight-semibold);
		gap: 7px;
		height: 40px;
		padding: 0 12px;
		text-decoration: none;
		width: auto;
	}

	.border-header-track .border-export-fa {
		font-size: 14px;
		margin: 0;
	}

	/* The label comes off here, and that is the whole trade: it buys the 86px the
	   support number needs. Tracking is a returning customer's action and the pin
	   is understood; it is also in the menu and the footer. The number is a first
	   contact's, and a service you can phone has to show a number to read as one —
	   the accessible name moves to the link's aria-label so nothing is lost. */
	.border-header-track-label {
		display: none;
	}

	.border-header-track,
	.border-site-header.is-condensed .border-header-track {
		padding: 0;
		width: 40px;
	}

	.border-header-track:hover,
	.border-header-track:focus-visible {
		background: var(--border-bg-muted);
		border-color: var(--border-text);
		color: var(--border-text);
	}

	.border-offcanvas-menu {
		padding: 88px 28px 32px;
	}

	.border-site-footer {
		padding: 48px 0 40px;
	}

	.border-footer-grid {
		gap: 32px;
		grid-template-columns: 1fr;
	}

	/* A fourth column makes the single-column stack long on a tablet; two fit
	   comfortably well before the full row does. */
	@media (min-width: 600px) {
		.border-footer-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

/* Device-local order memory (built by border-ui.js). */
.border-my-orders {
	margin: 28px auto 0;
	max-width: none;
	width: 100%;
}

.border-my-orders[hidden] {
	display: none !important;
}

.border-my-orders .border-kicker {
	margin-bottom: 12px;
}

.border-my-orders-list {
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.border-my-order {
	align-items: center;
	background: var(--border-bg-soft);
	border: 1px solid var(--border-line);
	border-radius: 14px;
	display: flex;
	gap: 0;
	overflow: hidden;
}

.border-my-order-link {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--border-text);
	display: flex;
	flex: 1 1 auto;
	gap: 14px;
	justify-content: space-between;
	min-height: 56px;
	padding: 12px 16px;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.border-my-order-link:hover,
.border-my-order-link:focus-visible {
	background: rgba(var(--border-text-rgb), 0.035);
}

.border-my-order-id {
	font-weight: var(--border-weight-medium);
}

.border-my-order-code {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
}

@media (max-width: 479px) {
	.border-my-order-link {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
		justify-content: center;
	}

	.border-my-order-code {
		white-space: nowrap;
	}
}

.border-my-order-forget {
	background: transparent;
	border: 0;
	border-left: 1px solid var(--border-line);
	border-radius: 0;
	color: var(--border-muted);
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 22px;
	height: 56px;
	line-height: 1;
	padding: 0;
	transition: color 0.15s ease, background 0.15s ease;
	width: 56px;
}

.border-my-order-forget:hover,
.border-my-order-forget:focus-visible {
	background: rgba(var(--border-text-rgb), 0.06);
	color: var(--border-text);
}

/*
 * Telegram connect button — a quiet Telegram-blue accent on the neutral
 * secondary button. The paper-plane icon carries the brand colour; the
 * surface only warms up on hover/focus so it stays in the monochrome system.
 */
.border-tg-connect {
	align-items: center;
	display: inline-flex;
	gap: 8px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.border-tg-connect .border-tg-connect-icon {
	color: var(--border-telegram);
	flex: 0 0 auto;
	transition: color 0.15s ease;
}

.border-tg-connect:hover,
.border-tg-connect:focus-visible {
	background: rgba(var(--border-telegram-rgb), 0.08);
	border-color: var(--border-telegram);
	color: var(--border-telegram);
}

.border-tg-connect:hover .border-tg-connect-icon,
.border-tg-connect:focus-visible .border-tg-connect-icon {
	color: var(--border-telegram);
}

/* Keep keyboard focus visible on actions without adding a second ring to
   form controls, which already use their own border + box-shadow state. */
.border-page :where(a, button):focus-visible,
.border-site-header :where(a, button):focus-visible,
.border-offcanvas-menu :where(a, button):focus-visible {
	outline: 3px solid var(--border-accent);
	outline-offset: 3px;
}
.border-source-more button {
	align-items: center;
	appearance: none;
	background: var(--border-contrast-surface);
	border: 1px solid var(--border-contrast-surface);
	border-radius: 12px;
	color: var(--border-on-contrast-surface);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: var(--border-text-base);
	font-weight: var(--border-weight-bold);
	justify-content: center;
	line-height: var(--border-leading-tight);
	min-height: 78px;
	padding: 18px;
	text-align: center;
	width: 100%;
}

/* Optional local forwarding estimate; shared form typography and palette. */
.border-shipping { border-top: 1px solid var(--border-palette-0); margin-top: 8px; padding-top: 20px; }
.border-shipping > .border-kicker { margin-bottom: 8px; }
.border-shipping .border-field-help { margin: 8px 0 16px; }
.border-shipping-result { background: var(--border-bg-muted); border-radius: 18px; margin-top: 16px; padding: 18px; }
.border-shipping-status { margin: 0; font-size: 14px; }
.border-shipping-total { display: block; font-size: 28px; line-height: 1.4; margin-top: 4px; }
.border-shipping summary { cursor: pointer; font-size: 13px; padding: 8px 0; }
.border-shipping-breakdown { margin: 8px 0 0; font-size: 14px; }
.border-shipping-breakdown > div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
.border-shipping-breakdown dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.border-shipping-breakdown > div:last-child { border-top: 1px solid var(--border-palette-0); font-weight: var(--border-weight-medium); margin-top: 6px; padding-top: 10px; }
.border-shipping [hidden] { display: none !important; }

.border-shipping-reveal {
	display: grid;
	grid-template-rows: 1fr;
	transition:
		grid-template-rows var(--border-reveal-duration) var(--border-reveal-ease),
		opacity calc(var(--border-reveal-duration) * 0.75) var(--border-reveal-ease);
}

.border-shipping-reveal > * {
	min-height: 0;
	overflow: hidden;
}

.border-shipping-reveal.is-collapsed {
	grid-template-rows: 0fr;
	opacity: 0;
	pointer-events: none;
	transition:
		grid-template-rows var(--border-reveal-duration) var(--border-reveal-ease),
		opacity calc(var(--border-reveal-duration) * 0.75) var(--border-reveal-ease);
}

/* Install the app + status notifications (BORDER Core: templates/install.php).
   Monochrome, no icons of its own: the panel is a utility, not a promotion. */
.border-install {
	display: grid;
	gap: 16px;
}

.border-install-disclosure > summary {
	list-style: none;
}

.border-install-disclosure > summary::-webkit-details-marker {
	display: none;
}

.border-install-summary {
	cursor: pointer;
	display: grid;
	gap: 8px;
	padding-right: 48px;
	position: relative;
}

.border-install-summary::after {
	border-bottom: 1.5px solid var(--border-text);
	border-right: 1.5px solid var(--border-text);
	content: '';
	height: 9px;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 200ms ease;
	width: 9px;
}

.border-install-disclosure[open] > .border-install-summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.border-install-summary:focus-visible {
	border-radius: 8px;
	outline: 2px solid var(--border-accent);
	outline-offset: 6px;
}

.border-install-summary .border-kicker {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 0;
}

.border-install .border-section-title {
	display: block;
	margin: 0;
}

.border-install-summary > .border-muted {
	display: block;
	margin: 0;
	max-width: 52ch;
}

.border-install-body {
	display: grid;
	gap: 16px;
	padding-top: 24px;
}

.border-install-prompt {
	margin-top: 4px;
}

.border-install-done {
	align-items: center;
	display: flex;
	font-weight: var(--border-weight-medium);
	gap: 10px;
	margin: 0;
}

.border-install-guides {
	border-top: 1px solid var(--border-line);
	display: grid;
	gap: 2px;
	padding-top: 20px;
}

.border-install-guides-title {
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-medium);
	letter-spacing: 0.04em;
	margin: 0 0 6px;
	text-transform: uppercase;
}

.border-install-guide {
	border-bottom: 1px solid var(--border-line);
}

.border-install-guide:last-child {
	border-bottom: 0;
}

.border-install-guide > summary {
	cursor: pointer;
	display: flex;
	font-size: var(--border-text-base);
	font-weight: var(--border-weight-medium);
	justify-content: space-between;
	list-style: none;
	min-height: 44px;
	padding: 12px 0;
}

.border-install-guide > summary::-webkit-details-marker {
	display: none;
}

/* A rotating chevron drawn in CSS, so the panel adds no image requests. */
.border-install-guide > summary::after {
	border-bottom: 1.5px solid var(--border-text);
	border-right: 1.5px solid var(--border-text);
	content: '';
	height: 8px;
	margin-top: 4px;
	transform: rotate(45deg);
	transition: transform 200ms ease;
	width: 8px;
}

.border-install-guide[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: 8px;
}

.border-install-guide > summary:focus-visible {
	border-radius: 8px;
	outline: 2px solid var(--border-accent);
	outline-offset: 4px;
}

.border-install-guide-body {
	padding: 0 0 16px;
}

.border-install-guide-body ol {
	counter-reset: border-install-step;
	display: grid;
	gap: 10px;
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.border-install-guide-body li {
	counter-increment: border-install-step;
	line-height: var(--border-leading-body);
	padding-left: 34px;
	position: relative;
}

.border-install-guide-body li::before {
	background: var(--border-bg-muted);
	border-radius: 50%;
	content: counter(border-install-step);
	display: grid;
	font-size: var(--border-text-xs);
	font-variant-numeric: tabular-nums;
	height: 24px;
	left: 0;
	place-items: center;
	position: absolute;
	top: 0;
	width: 24px;
}

.border-install-guide-body > .border-muted {
	font-size: var(--border-text-sm);
	margin: 0;
}

/* The notification toggle. Inside the account card it is a plain row; on the
   tracking page it is its own card under the order. */
.border-push {
	align-items: center;
	display: grid;
	gap: 16px;
}

.border-install:not(.border-install--compact) .border-push {
	border-top: 1px solid var(--border-line);
	padding-top: 20px;
}

.border-install--compact {
	display: block;
}

.border-push-copy strong {
	display: block;
	font-weight: var(--border-weight-medium);
}

.border-push-copy p {
	margin: 4px 0 0;
	max-width: 52ch;
}

.border-push-controls {
	display: grid;
	gap: 8px;
}

.border-push-state:empty {
	display: none;
}

.border-push-state,
.border-push-note {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
	line-height: var(--border-leading-copy);
	margin: 0;
	max-width: 52ch;
}

.border-push [hidden] {
	display: none !important;
}

@media (min-width: 640px) {
	.border-push {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.border-push-copy {
		grid-column: 1;
	}

	.border-push-controls {
		grid-column: 2;
		justify-items: end;
	}

	.border-push-note {
		grid-column: 1 / -1;
	}
}

/* Short screens (small laptops, older phones, landscape). The first screen must
   still hold the notice, the collapsed form and the Telegram alternative, so the
   notice gives up a line and the vertical rhythm tightens. Last in the file on
   purpose: it has to win over the min-width rules above. */
/* Payment page ------------------------------------------------------------- */

.border-payment-summary {
	border-top: 1px solid var(--border-line);
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	margin: 24px 0 0;
	padding-top: 20px;
}

.border-payment-summary dt {
	color: var(--border-muted);
	font-size: var(--border-text-xs);
	letter-spacing: 0.08em;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.border-payment-summary dd {
	font-size: var(--border-text-base);
	margin: 0;
}

/* The sum is the one thing the page exists to communicate, so it is read
   before anything else on the card. */
.border-payment-amount {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 28px 0 0;
}

/* The notice that follows the sum is a consequence of it, not a new section —
   close enough to read as one thought, far enough not to crowd the figure. */
.border-payment-amount + .border-form-notice {
	margin-top: 20px;
}

.border-payment-amount-label {
	color: var(--border-muted);
	font-size: var(--border-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.border-payment-amount strong {
	font-family: var(--border-font-display);
	font-size: var(--border-text-xl);
	line-height: 1.1;
}

.border-payment-form {
	margin-top: 20px;
}

/* Paying is the whole point of this page, so the button takes the full width
   at every size rather than tucking itself to the right like a form's submit. */
.border-payment-form .border-submit-button {
	margin-left: 0;
	width: 100%;
}

.border-payment-note {
	color: var(--border-muted);
	font-size: var(--border-text-sm);
	margin: 12px 0 0;
}

.border-payment-methods {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.border-payment-methods li {
	align-items: center;
	border: 1px solid var(--border-line);
	border-radius: 10px;
	color: var(--border-muted);
	display: inline-flex;
	font-size: var(--border-text-xs);
	gap: 6px;
	padding: 6px 10px;
	white-space: nowrap;
}

.border-payment-legal {
	margin-top: 16px;
}

.border-payment-legal-title {
	font-size: var(--border-text-lg);
	margin: 0 0 18px;
}

.border-order-meta--details .border-payment-account {
	min-width: 0;
}

.border-order-meta--details .border-payment-account dd {
	font-size: var(--border-text-sm);
	overflow-wrap: anywhere;
}

@media (min-width: 700px) {
	.border-order-meta--details .border-payment-account {
		grid-column: 1 / -1;
	}
}

.border-payment-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 20px 0 0;
}

.border-payment-links a {
	color: var(--border-text);
	font-size: var(--border-text-sm);
	text-underline-offset: 3px;
}

.border-content .border-payment-legal .border-payment-links {
	margin: 20px 0 0;
}

.border-content .border-payment-legal .border-payment-note {
	margin: 10px 0 0;
}

/* Payment page — the calculation, line by line (offer §4.2). */

.border-payment-lines {
	border-collapse: collapse;
	margin: 24px 0 0;
	width: 100%;
}

.border-payment-lines caption {
	margin-bottom: 10px;
	text-align: left;
}

.border-payment-lines th,
.border-payment-lines td {
	border-top: 1px solid var(--border-line);
	padding: 10px 0;
	text-align: left;
	vertical-align: baseline;
}

.border-payment-lines tr:first-child th,
.border-payment-lines tr:first-child td {
	border-top: none;
}

.border-payment-lines th {
	font-weight: var(--border-weight-regular);
	padding-right: 16px;
}

.border-payment-lines th small {
	color: var(--border-muted);
	display: block;
	font-size: var(--border-text-xs);
	margin-top: 2px;
}

.border-payment-lines td {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.border-payment-validity {
	color: var(--border-muted);
	flex-basis: 100%;
	font-size: var(--border-text-sm);
}

/* Manager invoice editor: four lines and a computed total. */

.border-payment-editor {
	border: 1px solid var(--border-line);
	border-radius: 16px;
	margin: 0;
	padding: 16px 18px 18px;
}

.border-payment-editor legend {
	font-size: var(--border-text-xs);
	letter-spacing: 0.08em;
	padding: 0 6px;
	text-transform: uppercase;
}

.border-payment-editor-row {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr 160px;
	padding: 8px 0;
}

.border-payment-editor-row + .border-payment-editor-row {
	border-top: 1px solid var(--border-line);
}

.border-payment-editor-row > span {
	font-size: var(--border-text-sm);
}

.border-payment-editor-row input {
	text-align: right;
}

.border-payment-editor-total {
	align-items: baseline;
	border-top: 1px solid var(--border-text);
	display: flex;
	justify-content: space-between;
	margin: 8px 0 0;
	padding-top: 12px;
}

.border-payment-editor-total span {
	color: var(--border-muted);
	font-size: var(--border-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.border-payment-editor-total strong {
	font-size: var(--border-text-lg);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.border-payment-editor-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.border-payment-editor-row input {
		text-align: left;
	}
}

/* Manager toolbar in the sticky header.
   The base button styles use doubled class selectors (.border-button.border-button),
   so anything that wants to resize them has to match that weight — a single class
   here silently loses and the button keeps its full 48px form. */

.border-header-action.border-header-action {
	box-sizing: border-box;
	flex: 0 0 auto;
	font-size: var(--border-text-xs);
	letter-spacing: 0.06em;
	margin-right: 8px;
	min-height: 40px;
	padding: 8px 16px;
	white-space: nowrap;
}

.border-header-action--new.border-header-action--new {
	align-items: center;
	display: inline-flex;
	gap: 6px;
}

.border-header-action--home.border-header-action--home {
	align-items: center;
	display: inline-flex;
	gap: 7px;
}

.border-header-action--home .border-export-fa {
	font-size: 14px;
	margin: 0;
}

.border-header-action--home .border-header-action-label {
	text-transform: uppercase;
}

.border-header-action--new span[aria-hidden] {
	font-size: 15px;
	line-height: 1;
}

@media (max-width: 900px) {
	.border-header-action.border-header-action {
		margin-right: 6px;
		padding: 8px 12px;
	}

	/* The label repeats what the plus already says, and the row has no width
	   to spare once the save action joins it. */
	.border-header-action-label {
		display: none;
	}

	.border-header-action--new.border-header-action--new,
	.border-header-action--home.border-header-action--home {
		gap: 0;
		min-width: 40px;
		padding: 8px;
	}
}

@media (max-width: 420px) {
	.border-header-action.border-header-action {
		font-size: 11px;
		letter-spacing: 0.02em;
		margin-right: 4px;
		padding: 8px 10px;
	}
}

/* Operator button in the sticky header. A headset and a word, never a number:
   the line it dials is the operator's, not the one we publish in the footer. */

.border-header-operator {
	align-items: center;
	box-sizing: border-box;
	border: 1px solid var(--border-line);
	border-radius: 999px;
	color: var(--border-text);
	display: inline-flex;
	flex: 0 0 auto;
	gap: 8px;
	margin-right: 10px;
	min-height: 38px;
	padding: 6px 14px;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, min-height 0.38s cubic-bezier(0.3, 1, 0.3, 1);
	white-space: nowrap;
}

@media (min-width: 1000px) {
	.border-site-header.is-condensed .border-header-operator {
		min-height: 34px;
	}
}

.border-header-operator:hover,
.border-header-operator:focus-visible {
	background: var(--border-bg-muted);
	border-color: var(--border-text);
}

.border-header-operator-icon {
	flex: 0 0 auto;
}

.border-header-operator-label {
	font-size: var(--border-text-sm);
	font-weight: var(--border-weight-medium);
}

@media (max-width: 999px) {
	/* The compact 40px mobile controls leave room for the full treatment: headset,
	   label and a visible gap after the brand mark. */
	.border-header-operator {
		gap: 6px;
		margin-right: 2px;
		min-height: 40px;
		padding: 0 10px;
	}

	.border-header-operator-icon {
		display: block;
	}
}

@media (max-width: 359px) {
	/* The smallest phones still in use. The tracking pill is an icon here, so the
	   padding that used to sit either side of its label is dead width. */
	.border-header-track,
	.border-site-header.is-condensed .border-header-track {
		font-size: 11px;
		gap: 5px;
	}

}

/* Manager form sections.
   The card lays its own children out with an 18px rhythm (flex + gap), but a
   section wrapper is a plain block — so everything inside one fell back to zero
   and labels ended up touching the field above them. */

.border-manager-operations {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.border-manager-operations > h3 {
	margin: 0;
}

/* Manager filters.
   The checkbox was inheriting the text-input costume — a 38x58 pill with
   appearance:none and no :checked state, so ticking it changed nothing on
   screen and it read as broken. It gets a real box and a real tick. */

.border-manager-checkbox input[type="checkbox"] {
	appearance: none;
	background: var(--border-bg-soft);
	border: 1px solid var(--border-line);
	border-radius: 8px;
	box-shadow: none;
	cursor: pointer;
	flex: 0 0 auto;
	height: 24px;
	min-height: 0;
	padding: 0;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 24px;
}

.border-manager-checkbox input[type="checkbox"]:hover {
	border-color: var(--border-text);
}

.border-manager-checkbox input[type="checkbox"]:checked {
	background-color: var(--border-text);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 15px 15px;
	border-color: var(--border-text);
}

.border-manager-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--border-accent);
	outline-offset: 2px;
}

.border-manager-checkbox {
	cursor: pointer;
}

/* Open, the toggle is black; the shared secondary-button hover then repainted
   its text blue, which on black is unreadable. Hover keeps the white text and
   lifts the background instead. */
.border-page .border-manager-filter-toggle[aria-expanded="true"]:hover,
.border-page .border-manager-filter-toggle[aria-expanded="true"]:focus-visible {
	background: color-mix(in srgb, var(--border-text) 86%, var(--border-on-ink));
	border-color: color-mix(in srgb, var(--border-text) 86%, var(--border-on-ink));
	color: var(--border-on-ink);
}

/* Marks an invoice line whose sum is a budget, not a price. Outlined rather
   than filled: the input beside it already uses the muted fill, and a chip in
   the same colour would read as another field. */

.border-payment-editor-row .border-estimate-chip {
	border: 1px solid var(--border-line);
	border-radius: 999px;
	color: var(--border-muted);
	display: inline-block;
	font-size: var(--border-text-xs);
	font-weight: var(--border-weight-medium);
	letter-spacing: 0;
	line-height: 1.35;
	margin-left: 8px;
	padding: 1px 9px;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
}

/* Carrier feed: one card per run waiting to be taken. */

.border-carrier-feed {
	display: grid;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.border-carrier-run-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: space-between;
	margin-bottom: 16px;
}

.border-carrier-run-code {
	font-family: var(--border-font-display);
	font-size: var(--border-text-lg);
	letter-spacing: 0.02em;
}

.border-carrier-run-status {
	border: 1px solid var(--border-line);
	border-radius: 999px;
	color: var(--border-muted);
	font-size: var(--border-text-xs);
	padding: 3px 12px;
	white-space: nowrap;
}

.border-carrier-empty {
	color: var(--border-muted);
}

@media (min-width: 768px) {
	.border-carrier-feed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.border-carrier-section-title {
	font-size: var(--border-text-lg);
	margin: 8px 0 0;
}

.border-carrier-run-action {
	margin-top: 16px;
}

.border-carrier-run-action .border-button,
.border-carrier-run-action .border-button-secondary {
	width: 100%;
}

/* A run already taken reads as settled, not as another thing to pick up. */
.border-carrier-run--mine {
	border-color: var(--border-text);
}

/* BEGIN telegram-cta — Telegram brand colours on the "order in Telegram" CTA.
   Self-contained on purpose: delete everything between this marker and END and
   the button returns to the outlined style, with nothing else touched.
   Scoped to .border-tg-order-button so the "connect Telegram" button on the
   order page keeps its quieter treatment. Doubled class because the base button
   styles use .border-button-secondary.border-button-secondary and a single
   class silently loses to them. */

.border-tg-order-button.border-tg-order-button {
	background: #1c92d2;
	border-color: #1c92d2;
	color: #ffffff;
}

.border-tg-order-button.border-tg-order-button .border-tg-connect-icon {
	color: #ffffff;
}

.border-tg-order-button.border-tg-order-button:hover,
.border-tg-order-button.border-tg-order-button:focus-visible {
	background: color-mix(in srgb, #1c92d2 86%, #000000);
	border-color: color-mix(in srgb, #1c92d2 86%, #000000);
	color: #ffffff;
}

.border-tg-order-button.border-tg-order-button:hover .border-tg-connect-icon,
.border-tg-order-button.border-tg-order-button:focus-visible .border-tg-connect-icon {
	color: #ffffff;
}

/* END telegram-cta */

@media (max-height: 760px) {
	.border-page-infobox.is-clampable .border-page-infobox-message {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.border-page-infobox-shell {
		padding: 8px 0;
	}

	.border-page-infobox-body {
		gap: 2px;
	}

	.border-page-infobox-toggle {
		min-height: 24px;
	}


	.border-hero {
		gap: 16px;
	}

	/* The description now lives on the first screen, so on a short one it gives
	   back a line and the hero card tightens its padding. */
	.border-field textarea {
		min-height: 76px;
	}

	.border-request-wrap--hero .border-request-card {
		padding: 24px;
	}
}