/*
Theme Name: iTCare
Theme URI: https://itcareconnect.com/
Author: Termatrac
Description: Public site and member portal for the iTCare membership programme. Presentation only — all membership, device and billing logic lives in the itcare-core plugin.
Version: 1.52.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itcare
*/

/* -------------------------------------------------------------------------
   Tokens
   ---------------------------------------------------------------------- */

/*
 * Values taken from the iTCare Membership & Pricing Calculator design. The palette is
 * warmer than the one it replaces — a softer yellow, an ink that is not quite black,
 * and paper-toned surfaces rather than pure greys — so tints read as deliberate rather
 * than as washed-out white.
 */
:root {
	--itcare-yellow: #ffc90d;
	--itcare-yellow-dark: #e0ae00;
	--itcare-black: #141413;
	--itcare-charcoal: #4d4d4a;
	--itcare-grey: #f1f0e7;
	--itcare-grey-mid: #dedbd1;
	--itcare-panel: #fbfbf7;
	--itcare-muted: #63635e;
	--itcare-white: #ffffff;
	--itcare-success: #1a7f37;
	--itcare-error: #d63638;

	--itcare-radius: 16px;
	--itcare-radius-lg: 20px;
	--itcare-radius-sm: 12px;
	--itcare-radius-pill: 999px;
	--itcare-container: 1328px;
	--itcare-gap: 28px;

	/* One family across the whole site, as the design uses. */
	--itcare-font-body: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--itcare-font-head: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--itcare-font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--itcare-black);
	background: var(--itcare-white);
	-webkit-font-smoothing: antialiased;
	/* Header, main and footer are the body's direct children in every template;
	   letting main grow keeps the footer at the foot of short pages instead of
	   leaving a blank band below it. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

#primary { flex: 1 0 auto; }

h1, h2, h3, h4 {
	font-family: var(--itcare-font-head);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 0.6em;
	/* Headings carry member emails and device codes, which have no break
	   opportunity and overhang a phone-width column without this. */
	overflow-wrap: break-word;
	word-break: break-word;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); letter-spacing: -0.015em; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1.1em; }

a {
	color: var(--itcare-black);
	text-decoration-color: var(--itcare-yellow);
	text-underline-offset: 3px;
}

a:hover { text-decoration-color: var(--itcare-black); }

img { max-width: 100%; height: auto; }

.itcare-container {
	width: 100%;
	max-width: var(--itcare-container);
	margin: 0 auto;
	padding: 0 24px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	background: var(--itcare-black);
	color: var(--itcare-white);
	padding: 12px 20px;
	border-radius: var(--itcare-radius-pill);
	clip: auto;
	width: auto;
	height: auto;
}

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */

/*
 * .itcare-button is the class every itcare-core form puts on its submit button, so it
 * is matched directly. Styling only `.itcare-form button` left the device
 * registration and company application buttons — whose forms carry a different
 * class — rendering as bare browser buttons.
 */
.itcare-btn,
.itcare-button,
.itcare-form button,
.wp-block-button__link {
	display: inline-block;
	font-family: var(--itcare-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 15px 28px;
	border: 2px solid var(--itcare-yellow);
	border-radius: var(--itcare-radius-pill);
	background: var(--itcare-yellow);
	color: var(--itcare-black);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.itcare-btn:hover,
.itcare-button:hover,
.itcare-form button:hover {
	background: var(--itcare-yellow-dark);
	border-color: var(--itcare-yellow-dark);
}

.itcare-btn:focus-visible,
.itcare-button:focus-visible,
.itcare-form button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--itcare-black);
	outline-offset: 3px;
}

.itcare-btn--ghost,
.itcare-button--ghost {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.itcare-btn--ghost:hover,
.itcare-button--ghost:hover {
	background: var(--itcare-black);
	border-color: var(--itcare-black);
	color: var(--itcare-white);
}

.itcare-hero .itcare-btn--ghost:hover {
	background: var(--itcare-white);
	border-color: var(--itcare-white);
	color: var(--itcare-black);
}

.itcare-btn--small,
.itcare-button--small { padding: 10px 20px; font-size: .9rem; }

.itcare-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */

.itcare-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--itcare-white);
	border-bottom: 1px solid var(--itcare-grey-mid);
}

.itcare-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
}

.site-title {
	font-family: var(--itcare-font-head);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.site-title__separator { color: var(--itcare-grey-mid); margin: 0 6px; }
.site-title__itcare { color: var(--itcare-yellow-dark); }

.itcare-nav ul {
	display: flex;
	align-items: center;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.itcare-nav a {
	font-weight: 500;
	font-size: .9rem;
	text-decoration: none;
	color: var(--itcare-charcoal);
}

.itcare-nav a:hover,
.itcare-nav .current-menu-item > a {
	color: var(--itcare-black);
	text-decoration: underline;
	text-decoration-color: var(--itcare-yellow);
	text-decoration-thickness: 2px;
}

/*
 * Dropdowns. A top-level item with sub-items (menu-item-has-children — emitted by
 * both wp_nav_menu and the fallback renderer) gets a chevron and opens its panel on
 * hover or on keyboard focus (:focus-within). Touch browsers fire :hover on the
 * first tap, so the panel opens before the parent link navigates.
 */
.itcare-nav li { position: relative; }

.itcare-nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.itcare-nav .menu-item-has-children > a::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.itcare-nav .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 14px);
	left: -14px;
	z-index: 60;
	min-width: 220px;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 8px;
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius-sm);
	box-shadow: 0 14px 30px rgba(20, 20, 19, .12);
}

/* Invisible bridge over the gap, so the pointer can travel from link to panel. */
.itcare-nav .sub-menu::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}

.itcare-nav li:hover > .sub-menu,
.itcare-nav li:focus-within > .sub-menu { display: flex; }

.itcare-nav .sub-menu li { width: 100%; }

.itcare-nav .sub-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: .88rem;
}

.itcare-nav .sub-menu a:hover {
	background: var(--itcare-grey);
	text-decoration: none;
}

.itcare-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* My Account menu (1.45.0): a <details> so it works without script. */
.itcare-account-menu { position: relative; }

.itcare-account-menu > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.itcare-account-menu > summary::-webkit-details-marker { display: none; }

.itcare-account-menu__caret {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.itcare-account-menu[open] .itcare-account-menu__caret { transform: translateY(1px) rotate(-135deg); }

.itcare-account-menu__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	z-index: 70;
	min-width: 230px;
	padding: 8px;
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius-sm);
	box-shadow: 0 14px 30px rgba(20, 20, 19, .12);
}

.itcare-account-menu__level {
	margin: 4px 12px 8px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--itcare-muted);
}

.itcare-account-menu ul { list-style: none; margin: 0; padding: 0; }

.itcare-account-menu li a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: .9rem;
	color: inherit;
}

.itcare-account-menu li a:hover,
.itcare-account-menu li a:focus-visible { background: var(--itcare-grey); text-decoration: none; }

.itcare-account-menu li a[aria-current="page"] { font-weight: 700; }

.itcare-account-menu__sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--itcare-grey-mid); }

/* Account pages (My Profile, Account Settings). */
.itcare-account .itcare-card { margin-bottom: 24px; }
.itcare-account .itcare-card h2 { font-size: 1.35rem; }
.itcare-account__toc ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0 0 24px; }
.itcare-account .itcare-field input[type="text"],
.itcare-account .itcare-field input[type="email"],
.itcare-account .itcare-field input[type="tel"],
.itcare-account .itcare-field input[type="password"],
.itcare-account .itcare-field select,
.itcare-account .itcare-field textarea { width: 100%; max-width: 520px; }
.itcare-account fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.itcare-account legend { font-weight: 600; margin-bottom: 6px; }
.itcare-account button[disabled] { opacity: .6; cursor: progress; }

/*
 * Hamburger button. 44px square so it clears the WCAG 2.2 target-size minimum, with
 * the label kept for screen readers only. The bars are one element plus its two
 * pseudo-elements, which lets them rotate into a close cross when the menu opens.
 */
.itcare-menu-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	background: none;
	border: 2px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius-pill);
	padding: 0;
	cursor: pointer;
	color: var(--itcare-black);
}

.itcare-menu-toggle__bars,
.itcare-menu-toggle__bars::before,
.itcare-menu-toggle__bars::after {
	position: absolute;
	left: 50%;
	width: 18px;
	height: 2px;
	margin-left: -9px;
	border-radius: 2px;
	background: currentColor;
	transition: transform .18s ease, opacity .18s ease;
}

.itcare-menu-toggle__bars {
	top: 50%;
	margin-top: -1px;
}

.itcare-menu-toggle__bars::before,
.itcare-menu-toggle__bars::after {
	content: "";
	left: 0;
	margin-left: 0;
}

.itcare-menu-toggle__bars::before { top: -6px; }
.itcare-menu-toggle__bars::after { top: 6px; }

.itcare-menu-toggle[aria-expanded="true"] .itcare-menu-toggle__bars { background: transparent; }
.itcare-menu-toggle[aria-expanded="true"] .itcare-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.itcare-menu-toggle[aria-expanded="true"] .itcare-menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.itcare-menu-toggle:focus-visible {
	outline: 2px solid var(--itcare-yellow-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.itcare-menu-toggle__bars,
	.itcare-menu-toggle__bars::before,
	.itcare-menu-toggle__bars::after { transition: none; }
}

/* -------------------------------------------------------------------------
   Sections
   ---------------------------------------------------------------------- */

.itcare-section { padding: 84px 0; }
.itcare-section--tight { padding: 56px 0; }
.itcare-section--grey { background: var(--itcare-grey); }

.itcare-eyebrow {
	display: inline-block;
	font-family: var(--itcare-font-body);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--itcare-muted);
	margin-bottom: 14px;
}

.itcare-lead {
	font-size: 1.15rem;
	color: var(--itcare-muted);
	max-width: 62ch;
}

.itcare-section__head { max-width: 720px; margin-bottom: 48px; }

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.itcare-hero {
	background: var(--itcare-charcoal);
	color: var(--itcare-white);
	padding: 96px 0 104px;
}

.itcare-hero h1 { color: var(--itcare-white); max-width: 16ch; }
.itcare-hero .itcare-lead { color: rgba(255, 255, 255, .94); }

/*
 * In the hero the eyebrow is a solid yellow pill rather than loose uppercase text —
 * it is the one element carrying brand colour against the dark ground.
 */
.itcare-hero .itcare-eyebrow {
	background: var(--itcare-yellow);
	color: var(--itcare-black);
	letter-spacing: .01em;
	text-transform: none;
	font-size: .78rem;
	padding: 8px 16px;
	border-radius: var(--itcare-radius-pill);
	margin-bottom: 20px;
}

.itcare-hero__rule {
	width: 72px;
	height: 4px;
	background: var(--itcare-yellow);
	border: 0;
	margin: 0 0 28px;
}

/* -------------------------------------------------------------------------
   Cards and grids
   ---------------------------------------------------------------------- */

.itcare-grid {
	display: grid;
	gap: var(--itcare-gap);
}

.itcare-grid--2 { grid-template-columns: repeat(2, 1fr); }
.itcare-grid--3 { grid-template-columns: repeat(3, 1fr); }
.itcare-grid--4 { grid-template-columns: repeat(4, 1fr); }

.itcare-card {
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 32px;
	/* Column so a card's call to action can sit on its bottom edge, which lines the
	   links of a row up with each other however long the copy above them runs. */
	display: flex;
	flex-direction: column;
	height: 100%;
}

.itcare-card h3 { margin-bottom: .5em; }
.itcare-card p:last-child { margin-bottom: 0; }

/* Billing → Renewal: the cancel button's paragraph is the last child of its
   form, so the rule above zeroed its margin and the early-end note sat hard
   against the button. Give the form its own breathing room instead. */
.itcare-billing-renewal form { margin: 8px 0 24px; }
.itcare-billing-renewal form p { margin: 0; }
.itcare-billing-renewal > .itcare-hint { display: block; line-height: 1.55; }

/*
 * The dashboard's Membership Status card. Yellow marks it as the card describing the
 * member, rather than one of the places they can go from here. Padding drops by the
 * extra border width so the contents do not shift against its neighbours.
 */
.itcare-card--highlight {
	border: 2px solid var(--itcare-yellow);
	padding: 31px;
}

/*
 * Full-width cards read top to bottom — a training pathway, where each step follows
 * the one above it. `height: 100%` on .itcare-card is for equalising a row, so it is
 * released here.
 */
.itcare-stack {
	display: grid;
	gap: 20px;
}

.itcare-stack > .itcare-card { height: auto; }

/* The last paragraph sits tight to the card edge unless buttons follow it. */
.itcare-stack .itcare-actions { margin-top: 20px; }

/*
 * Video embed inside a card. Capped at a comfortable reading width rather than
 * filling a 1328px container — a 16:9 video the full width of the page would be
 * ~740px tall and push everything below it off screen. The theme's responsive-embeds
 * support supplies the aspect ratio.
 */
.itcare-video {
	margin: 20px 0 0;
	max-width: 760px;
	border-radius: var(--itcare-radius-sm);
	overflow: hidden;
	background: var(--itcare-grey);
}

.itcare-video iframe { display: block; width: 100%; border: 0; }

.itcare-card__marker {
	display: block;
	width: 40px;
	height: 4px;
	background: var(--itcare-yellow);
	margin-bottom: 22px;
}

/* -------------------------------------------------------------------------
   Plan cards
   ---------------------------------------------------------------------- */

.itcare-plans { align-items: stretch; }

.itcare-plan {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 40px;
	background: var(--itcare-white);
}

.itcare-plan--featured {
	border-color: var(--itcare-black);
	background: var(--itcare-black);
	color: var(--itcare-white);
}

.itcare-plan--featured h3 { color: var(--itcare-white); }
.itcare-plan--featured .itcare-plan__price small { color: rgba(255, 255, 255, .7); }
.itcare-plan--featured p { color: rgba(255, 255, 255, .82); }

.itcare-plan__name {
	font-family: var(--itcare-font-head);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.itcare-plan--featured .itcare-plan__name { color: var(--itcare-yellow); }

.itcare-plan__price {
	font-family: var(--itcare-font-head);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 6px;
}

.itcare-plan__price small {
	display: block;
	font-family: var(--itcare-font-body);
	font-size: .95rem;
	font-weight: 500;
	color: var(--itcare-muted);
	margin-top: 8px;
	line-height: 1.5;
}

.itcare-plan__cta { margin-top: auto; padding-top: 26px; }

/* -------------------------------------------------------------------------
   Comparison table
   ---------------------------------------------------------------------- */

/*
 * The scroll container and the min-width must live on different elements, or the
 * container cannot shrink and the whole page scrolls sideways instead of the table.
 * Added as a block, the table carries .itcare-compare on its <figure> wrapper rather
 * than on the <table>, so both arrangements are matched explicitly.
 */
.itcare-table-wrap,
figure.wp-block-table.itcare-compare {
	overflow-x: auto;
	max-width: 100%;
	min-width: 0;
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
}

.itcare-table-wrap > table,
table.itcare-compare,
.itcare-compare > table {
	width: 100%;
	min-width: 640px;
	border-collapse: collapse;
	background: var(--itcare-white);
}

.itcare-compare th,
.itcare-compare td {
	padding: 16px 20px;
	text-align: left;
	border-bottom: 1px solid var(--itcare-grey-mid);
	vertical-align: top;
	font-size: .96rem;
}

.itcare-compare thead th {
	background: var(--itcare-black);
	color: var(--itcare-white);
	font-family: var(--itcare-font-head);
	font-size: 1rem;
}

.itcare-compare thead th:first-child { border-top-left-radius: var(--itcare-radius); }
.itcare-compare thead th:last-child { border-top-right-radius: var(--itcare-radius); }

.itcare-compare tbody tr:nth-child(even) { background: #fafafa; }
.itcare-compare tbody tr:last-child td { border-bottom: 0; }

.itcare-compare th[scope="row"] { font-weight: 600; }

.itcare-compare__yes { color: var(--itcare-success); font-weight: 600; }
.itcare-compare__no { color: var(--itcare-muted); }

/* -------------------------------------------------------------------------
   Pillars
   ---------------------------------------------------------------------- */

.itcare-pillar__letter {
	font-family: var(--itcare-font-head);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--itcare-yellow);
	line-height: 1;
	margin-bottom: 12px;
}

/* -------------------------------------------------------------------------
   Forms (shared with itcare-core shortcodes)
   ---------------------------------------------------------------------- */

.itcare-form,
.itcare-register,
.itcare-signin,
.itcare-company-application {
	max-width: 560px;
}

/*
 * Panelled form, per the portal design: a dark title bar, a body laid out in two
 * columns, and a footer pairing the required-fields note with the submit button.
 * Wider than the 560px single-column forms above, because two fields sit side by
 * side.
 */
.itcare-form-card {
	max-width: 1100px;
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	overflow: hidden;
	background: var(--itcare-white);
}

.itcare-form-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	background: var(--itcare-black);
	color: var(--itcare-white);
	padding: 18px 28px;
}

.itcare-form-card__head h2,
.itcare-form-card__head h3 {
	letter-spacing: normal;
	margin: 0;
	font-size: 1.05rem;
	color: var(--itcare-white);
}

.itcare-form-card__head span {
	font-size: .88rem;
	color: rgba(255, 255, 255, .8);
}

.itcare-form-card__body { padding: 28px; }

.itcare-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 28px;
}

/* A field that spans the row — the calibration date, which carries a hint and a
   disclosure underneath and reads badly in half the width. */
.itcare-field--wide { grid-column: 1 / -1; }

.itcare-form-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 28px;
	border-top: 1px solid var(--itcare-grey-mid);
	background: var(--itcare-panel);
}

.itcare-form-card__foot p { margin: 0; }

/* Decorative — `required` on the input is what assistive technology announces. */
.itcare-required {
	color: var(--itcare-error);
	margin-left: 2px;
}

.itcare-field { margin-bottom: 18px; }

.itcare-field label,
.itcare-form label {
	display: inline-block;
	font-weight: 600;
	font-size: .93rem;
	margin-bottom: 6px;
}

.itcare-field input,
.itcare-field select,
.itcare-field textarea,
.itcare-form input[type="text"],
.itcare-form input[type="email"],
.itcare-form input[type="tel"],
.itcare-form input[type="password"],
.itcare-form select,
.itcare-form textarea,
.login-username input,
.login-password input {
	width: 100%;
	padding: 13px 16px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--itcare-black);
	background: var(--itcare-white);
	border: 2px solid var(--itcare-grey-mid);
	border-radius: 10px;
}

.itcare-field input:focus,
.itcare-field select:focus,
.itcare-form input:focus,
.itcare-form select:focus,
.itcare-form textarea:focus {
	outline: none;
	border-color: var(--itcare-yellow);
}

.itcare-field textarea { min-height: 130px; resize: vertical; }

.itcare-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.itcare-hint { font-size: .88rem; color: var(--itcare-muted); }

/* A hint the customer must not miss (the serial's trailing letter, 1.49.3):
   a yellow-edged note under the field instead of grey small print. */
.itcare-hint--callout {
	display: block;
	margin-top: 8px;
	padding: 10px 14px;
	border-left: 4px solid var(--itcare-yellow);
	border-radius: 0 var(--itcare-radius-sm) var(--itcare-radius-sm) 0;
	background: var(--itcare-panel);
	color: var(--itcare-black);
	font-size: .93rem;
	line-height: 1.5;
}

/* Live password feedback (core PasswordFields). Empty until the visitor types. */
.itcare-password-live { display: inline-block; min-height: 1.2em; margin-top: 4px; }
.itcare-password-live[data-state="error"] { color: var(--itcare-error); font-weight: 600; }
.itcare-password-live[data-state="ok"] { color: var(--itcare-success); font-weight: 600; }

/*
 * "Where do I find my next calibration date?" — a disclosure holding the two iTraker
 * App screenshots. Folded away by default: inline, two full-height phone captures
 * turn a three-field form into several screens of scrolling and push the submit
 * button out of sight. The shots are 1080x2316, so they are capped by height rather
 * than width; capping the width would leave a strip 700px tall.
 */
.itcare-calibration-help {
	background: var(--itcare-grey);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 14px 20px;
	margin: 14px 0 0;
}

.itcare-calibration-help__summary {
	cursor: pointer;
	font-size: .9rem;
	font-weight: 600;
}

.itcare-calibration-help__summary:focus-visible {
	outline: 2px solid var(--itcare-yellow);
	outline-offset: 3px;
}

.itcare-calibration-help[open] .itcare-calibration-help__summary { margin-bottom: 14px; }

.itcare-calibration-help__intro {
	margin: 0 0 14px;
	font-size: .93rem;
	font-weight: 600;
}

.itcare-calibration-help__steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0 0 0 1.2em;
}

.itcare-calibration-help__step {
	min-width: 0;
	font-size: .88rem;
	line-height: 1.45;
}

.itcare-calibration-help__step p { margin: 0 0 10px; }

.itcare-calibration-help__shot {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 300px;
	border: 1px solid var(--itcare-grey-mid);
	border-radius: 8px;
	background: var(--itcare-white);
}

/*
 * One column below 560px. Side by side, each screenshot would be under 130px wide,
 * which is too small to pick the highlighted control out of.
 */
@media (max-width: 560px) {
	.itcare-calibration-help__steps { grid-template-columns: minmax(0, 1fr); }
	.itcare-calibration-help__shot { max-height: 360px; margin: 0 auto; }
}

.itcare-errors {
	border-left: 4px solid var(--itcare-error);
	background: #fdf2f2;
	padding: 14px 18px;
	border-radius: 8px;
	margin-bottom: 22px;
}

.itcare-errors ul { margin: 0; padding-left: 18px; }
.itcare-errors p { margin: 0; }

/* WordPress login form, restyled so it does not look like wp-admin. */
.itcare-signin .login-remember { margin: 6px 0 18px; font-size: .93rem; }
.itcare-signin .login-remember input { width: auto; margin-right: 8px; }
.itcare-signin .login-submit input {
	display: inline-block;
	font-weight: 700;
	font-size: 1rem;
	padding: 15px 28px;
	border: 2px solid var(--itcare-yellow);
	border-radius: var(--itcare-radius-pill);
	background: var(--itcare-yellow);
	color: var(--itcare-black);
	cursor: pointer;
}
.itcare-signin__reset { margin-top: 16px; font-size: .93rem; }

/* -------------------------------------------------------------------------
   Account dashboard (rendered by itcare-core)
   ---------------------------------------------------------------------- */

.itcare-account-status { max-width: none; }

.itcare-status-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 10px 28px;
	margin: 0 0 28px;
	padding: 24px 28px;
	background: var(--itcare-grey);
	border-radius: var(--itcare-radius);
}

.itcare-status-list dt { font-weight: 600; color: var(--itcare-muted); }
.itcare-status-list dd { margin: 0; font-weight: 600; }

/*
 * The plugin emits this list as ul > li > span + strong. `display: contents`
 * dissolves each li so the span and strong become the grid's own children, landing
 * in the same two columns the dt/dd version uses — one rule set, both markups.
 */
ul.itcare-status-list { list-style: none; }
.itcare-status-list li { display: contents; }
.itcare-status-list li span { font-weight: 600; color: var(--itcare-muted); }
.itcare-status-list li strong { font-weight: 600; }

.itcare-devices {
	width: 100%;
	border-collapse: collapse;
	margin-top: 12px;
}

.itcare-devices th,
.itcare-devices td {
	padding: 13px 16px;
	text-align: left;
	border-bottom: 1px solid var(--itcare-grey-mid);
	font-size: .95rem;
}

.itcare-devices thead th {
	font-family: var(--itcare-font-head);
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--itcare-muted);
}

.itcare-history {
	font-size: .86rem;
	color: var(--itcare-muted);
	padding-left: 32px !important;
}

/* -------------------------------------------------------------------------
   Members-only gate (rendered by itcare-core)
   ---------------------------------------------------------------------- */

/* Members-only panel (1.49.0): a card under the page title, not a centred
   box with a curved yellow edge. The yellow bar is an inset shadow so the
   rounded corners stay clean. */
.itcare-gate {
	max-width: 720px;
	margin: 0;
	padding: 40px 40px 36px;
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	box-shadow: inset 0 5px 0 var(--itcare-yellow);
}

.itcare-gate .itcare-btn { margin-top: 8px; }

@media (max-width: 720px) {
	.itcare-gate { padding: 28px 24px 24px; }
}

.itcare-gate h2 { margin-top: 0; }
.itcare-gate p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.itcare-footer {
	background: var(--itcare-black);
	color: rgba(255, 255, 255, .72);
	padding: 64px 0 40px;
	margin-top: 0;
}

.itcare-footer a { color: var(--itcare-white); text-decoration: none; }
.itcare-footer a:hover { text-decoration: underline; text-decoration-color: var(--itcare-yellow); }
.itcare-footer h2,
.itcare-footer h3 { color: var(--itcare-white); font-size: 1rem; letter-spacing: normal; margin-bottom: 14px; }

.itcare-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.itcare-footer ul { list-style: none; margin: 0; padding: 0; }
.itcare-footer li { margin-bottom: 9px; }

.itcare-footer__base {
	padding-top: 26px;
	font-size: .88rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

/* Privacy Policy and Terms & Conditions, on the copyright row. Separated by a
   dot rather than commas so they read as links, not a sentence. */
.itcare-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.itcare-footer__legal a { color: rgba(255, 255, 255, .85); }

.itcare-footer__legal a + a::before {
	content: "\00b7";
	margin-right: 18px;
	color: rgba(255, 255, 255, .4);
}

/* -------------------------------------------------------------------------
   Editor content
   ---------------------------------------------------------------------- */

/*
 * padding-block, not the padding shorthand: page.php puts .entry-content on the same
 * element as .itcare-container, and a shorthand here wins on source order and zeroes
 * the container's 24px side padding, pinning form labels to the screen edge.
 */
.entry-content { padding-block: 64px; }
.entry-content > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { max-width: var(--itcare-container); }

/* -------------------------------------------------------------------------
   Tier cards
   ---------------------------------------------------------------------- */

.itcare-tier {
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 22px 24px 26px;
	height: 100%;
}

/*
 * The design marks the Silver card with a "SELECTED" badge. That is a state in an
 * interactive mock, not page copy — on a published page it would either be meaningless
 * or a marketing claim nobody has approved — so the featured card is distinguished by
 * its border alone.
 */
.itcare-tier--featured { border: 2px solid var(--itcare-yellow); }

.itcare-tier__kicker {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--itcare-muted);
	margin: 0 0 6px;
}

.itcare-tier__name {
	font-size: 1.75rem;
	margin: 0 0 12px;
}

.itcare-tier__price {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 4px;
}

.itcare-tier__price-note {
	font-size: .78rem;
	color: var(--itcare-muted);
	margin: 0 0 18px;
}

/*
 * The tick list is an ordinary list in the editor, so the copy stays editable. The
 * marker is drawn with a pseudo-element rather than a character in the text, which
 * keeps the yellow disc out of anything a screen reader reads aloud.
 */
.itcare-tier__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.itcare-tier__list li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 9px;
	font-size: .84rem;
	line-height: 1.45;
}

.itcare-tier__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--itcare-yellow);
}

.itcare-tier__list li::after {
	content: "";
	position: absolute;
	left: 4px;
	top: .5em;
	width: 4px;
	height: 7px;
	border: solid var(--itcare-black);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* The per-device rate table that sits beside the cards. */
.itcare-rates {
	background: var(--itcare-grey);
	border-radius: var(--itcare-radius);
	padding: 20px 24px 22px;
	height: 100%;
}

.itcare-rates h3 { font-size: 1.2rem; margin-bottom: 14px; }

.itcare-rates table {
	width: 100%;
	border-collapse: collapse;
	font-size: .76rem;
}

.itcare-rates th,
.itcare-rates td {
	text-align: left;
	padding: 4px 0;
	border: 0;
}

.itcare-rates thead th {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--itcare-muted);
	padding-bottom: 8px;
}

.itcare-rates td + td,
.itcare-rates th + th { text-align: right; }

.itcare-rates__note {
	font-size: .8rem;
	color: var(--itcare-muted);
	margin: 14px 0 0;
}

/* -------------------------------------------------------------------------
   Pricing calculator

   Markup comes from the itcare-core [itcare_pricing_calculator] shortcode; the
   theme supplies only the skin.
   ---------------------------------------------------------------------- */

.itcare-calc {
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius-lg);
	padding: 30px 32px 34px;
}

.itcare-calc__title { font-size: 1.75rem; margin: 0 0 8px; }

.itcare-calc__lede {
	font-size: .82rem;
	color: var(--itcare-muted);
	margin: 0 0 28px;
}

.itcare-calc__grid {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(240px, 1fr) minmax(260px, 1.1fr);
	gap: 24px;
	align-items: start;
}

/* --- Plan toggle --- */

.itcare-calc__plans {
	display: flex;
	gap: 8px;
	background: var(--itcare-grey);
	border-radius: var(--itcare-radius-sm);
	padding: 4px;
	margin-bottom: 26px;
}

.itcare-calc__plan {
	flex: 1;
	border: 0;
	background: transparent;
	border-radius: 10px;
	padding: 13px 10px;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 600;
	color: var(--itcare-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.itcare-calc__plan[aria-checked="true"] {
	background: var(--itcare-white);
	color: var(--itcare-black);
	font-weight: 700;
}

/* Silver is the priced plan, so its selected state carries the brand colour. */
.itcare-calc[data-plan="silver"] .itcare-calc__plan[data-calc-plan="silver"][aria-checked="true"] {
	background: var(--itcare-yellow);
}

.itcare-calc__label {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	margin-bottom: 8px;
}

/* --- Device stepper --- */

.itcare-calc__stepper {
	display: flex;
	align-items: center;
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius-sm);
	background: var(--itcare-white);
	overflow: hidden;
}

.itcare-calc__step {
	width: 58px;
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1.35rem;
	line-height: 1;
	padding: 18px 0;
	color: var(--itcare-black);
	cursor: pointer;
}

.itcare-calc__step:hover { background: var(--itcare-grey); }

.itcare-calc__count {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: inherit;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--itcare-black);
	padding: 16px 0;
	-moz-appearance: textfield;
}

.itcare-calc__count::-webkit-outer-spin-button,
.itcare-calc__count::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.itcare-calc__count:focus,
.itcare-calc__plan:focus-visible,
.itcare-calc__step:focus-visible {
	outline: 2px solid var(--itcare-yellow-dark);
	outline-offset: -2px;
}

.itcare-calc__hint {
	font-size: .8rem;
	color: var(--itcare-muted);
	margin: 10px 0 0;
}

/* --- Result panels --- */

.itcare-calc__panel {
	background: var(--itcare-panel);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 22px 24px 24px;
	min-height: 180px;
}

.itcare-calc__panel--dark {
	background: var(--itcare-black);
	border-color: var(--itcare-black);
	color: var(--itcare-white);
}

.itcare-calc__panel-label {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--itcare-muted);
	margin: 0 0 12px;
}

.itcare-calc__panel--dark .itcare-calc__panel-label { color: var(--itcare-yellow); }

.itcare-calc__figure {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	/* Digits change width as the total changes; tabular figures stop the panel
	   twitching every time the stepper is clicked. */
	font-variant-numeric: tabular-nums;
}

.itcare-calc__panel-sub {
	font-size: .82rem;
	color: var(--itcare-muted);
	margin: 0 0 16px;
}

.itcare-calc__panel--dark .itcare-calc__panel-sub { color: rgba(255, 255, 255, .85); }

.itcare-calc__panel-foot {
	font-size: .8rem;
	font-weight: 500;
	color: var(--itcare-muted);
	margin: 0;
}

.itcare-calc__panel-foot--accent { color: var(--itcare-yellow); }

/* --- Breakdown --- */

.itcare-calc__breakdown {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--itcare-grey-mid);
}

.itcare-calc__breakdown[hidden] { display: none; }

.itcare-calc__breakdown-title { font-size: 1rem; margin: 0 0 18px; }

/* Long breakdowns scroll inside the card rather than pushing the page sideways. */
.itcare-calc__table-wrap { overflow-x: auto; }

.itcare-calc__table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: .88rem;
}

.itcare-calc__table th,
.itcare-calc__table td {
	text-align: left;
	padding: 12px 12px 12px 0;
	border-bottom: 1px solid var(--itcare-grey-mid);
	font-variant-numeric: tabular-nums;
}

.itcare-calc__table thead th {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--itcare-muted);
	padding-bottom: 10px;
}

.itcare-calc__table tbody th[scope="row"] { font-weight: 600; }

.itcare-calc__free {
	margin-top: 24px;
	background: var(--itcare-black);
	color: var(--itcare-white);
	border-radius: var(--itcare-radius);
	padding: 24px 26px;
}

.itcare-calc__free[hidden] { display: none; }

.itcare-calc__free-heading { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; }

.itcare-calc__free-body {
	font-size: .82rem;
	color: rgba(255, 255, 255, .85);
	margin: 0;
}

/* Optional call-to-action under the calculator — rendered by itcare-core when the
   shortcode carries cta_label + cta_url; the button itself reuses .itcare-button. */
.itcare-calc__cta {
	margin: 28px 0 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
   Comparison at a glance
   ---------------------------------------------------------------------- */

.itcare-glance {
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 22px 26px 26px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.itcare-glance__label {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--itcare-muted);
	margin: 0 0 14px;
}

.itcare-glance p + p { margin-bottom: 8px; }
.itcare-glance p:last-child { margin-bottom: 0; }
.itcare-glance__value { font-size: .84rem; margin: 0 0 8px; }

/* -------------------------------------------------------------------------
   Portal shell
   ---------------------------------------------------------------------- */

/*
 * The signed-in hero. Shorter than the marketing hero — a member arriving at their
 * own dashboard wants the content, not a full-height banner — and it carries a
 * membership badge instead of the eyebrow/rule pair.
 */
.itcare-hero--portal { padding: 52px 0 56px; }

.itcare-hero--portal h1 {
	max-width: 22ch;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	margin: 0;
}

.itcare-hero--portal .itcare-lead { margin: 14px 0 0; }

.itcare-hero__badge {
	display: inline-block;
	background: var(--itcare-yellow);
	color: var(--itcare-black);
	font-family: var(--itcare-font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	padding: 9px 16px;
	border-radius: var(--itcare-radius-pill);
	margin-bottom: 18px;
}

/* Portal cards sit on the paper tone rather than white, so a grid of them reads as
   one panel against the page instead of a row of floating boxes. */
.itcare-card--panel {
	background: var(--itcare-panel);
}

/*
 * A card that is itself a link — the Updates grid, where every box is a way through
 * to a page rather than a description of one.
 *
 * The heading's anchor is stretched over the whole card by an absolutely positioned
 * ::after, so the entire surface is a hit target while the accessible name stays
 * just the heading. Two consequences follow:
 *   - the card has to be a positioning context, hence `position: relative`;
 *   - anything inside that also needs clicking — the mailto: and tel: links in the
 *     Support copy — must be lifted back above that stretched layer.
 */
.itcare-card--link {
	position: relative;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.itcare-card__link {
	color: inherit;
	text-decoration: none;
}

.itcare-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.itcare-card--link:hover {
	border-color: var(--itcare-yellow);
	box-shadow: 0 6px 18px rgba(20, 20, 19, .08);
	transform: translateY(-2px);
}

.itcare-card--link:hover .itcare-card__link { text-decoration: underline; }

/* The focus ring belongs on the card, because the card is what the link covers. */
.itcare-card--link:focus-within {
	outline: 2px solid var(--itcare-black);
	outline-offset: 3px;
}

.itcare-card__link:focus-visible { outline: none; }

/* Body links stay clickable, above the stretched layer. */
.itcare-card--link p a {
	position: relative;
	z-index: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.itcare-card--link { transition: none; }
	.itcare-card--link:hover { transform: none; }
}

.itcare-card__cta { margin-top: auto; padding-top: 22px; }

.itcare-card__cta a {
	font-weight: 700;
	text-decoration: none;
}

.itcare-card__cta a::after {
	content: " \2192";
	white-space: nowrap;
}

.itcare-card__cta a:hover { text-decoration: underline; }

/*
 * The Membership Status card's contents, supplied by [itcare_membership_card].
 * The status list is shared with the standalone account dashboard, where it is a
 * grey panel in its own right; inside a card that second surface reads as a box in a
 * box, so the fill and padding come off.
 */
.itcare-membership-card__name {
	font-weight: 700;
	margin-bottom: 16px;
}

.itcare-membership-card__empty { color: var(--itcare-muted); }

.itcare-status-list--card {
	background: transparent;
	padding: 0;
	margin-bottom: 0;
	gap: 8px 24px;
}

.itcare-status-list--card dt { font-weight: 400; }

/*
 * In the narrow overview card a label column sized to its longest label
 * ("Founding Member certificate") squeezed the values into one word per line
 * (1.46.0). Each label now sits above its value, as on a phone.
 */
.itcare-status-list--card {
	grid-template-columns: minmax(0, 1fr);
	gap: 2px 0;
}

.itcare-status-list--card dt { font-size: 0.875em; }
.itcare-status-list--card dd { margin-bottom: 10px; overflow-wrap: break-word; }
.itcare-status-list--card dd:last-child { margin-bottom: 0; }

/*
 * Notice panel. Pale yellow rather than the solid brand yellow: this carries several
 * lines of prose, and full-strength yellow behind a paragraph is hard to read.
 */
.itcare-notice {
	background: #fdf3cf;
	border-radius: var(--itcare-radius);
	padding: 28px 32px;
}

.itcare-notice h3 { margin-bottom: .5em; }

/* Section headings that sit straight under the page title are h2 for the
   outline but keep the h3 size (1.48.0). */
.itcare-notice h2,
.itcare-contact-info h2 { font-size: 1.3rem; letter-spacing: normal; margin-bottom: .5em; }
.itcare-notice p:last-child { margin-bottom: 0; }

/*
 * Portal data tables. Same shrink-safe arrangement as the comparison table: the
 * scroll container and the min-width must sit on different elements or the page
 * scrolls sideways instead of the table.
 */
.itcare-data-wrap {
	overflow-x: auto;
	max-width: 100%;
	min-width: 0;
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	background: var(--itcare-white);
}

.itcare-data-wrap > table,
table.itcare-data {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	background: var(--itcare-white);
}

.itcare-data th,
.itcare-data td {
	padding: 15px 20px;
	text-align: left;
	border-bottom: 1px solid var(--itcare-grey-mid);
	vertical-align: top;
	font-size: .94rem;
}

/*
 * Paper-toned header rather than the black one the comparison table uses. This table
 * is the member's own data, read row by row; a heavy black band across the top of it
 * pulls the eye to the labels instead of to the devices.
 */
.itcare-data thead th {
	background: var(--itcare-grey);
	color: var(--itcare-black);
	font-family: var(--itcare-font-head);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
}

.itcare-data tbody tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------------------
   Calibration
   ---------------------------------------------------------------------- */

.itcare-calibration-cards { margin-bottom: 48px; }

/* Recommended Due Date card: one row per device — serial, date, badge. */
.itcare-calibration-due {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.itcare-calibration-due__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "serial badge" "date badge";
	column-gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--itcare-grey-mid);
}

.itcare-calibration-due__row:first-child { padding-top: 0; }
.itcare-calibration-due__row:last-child { border-bottom: 0; padding-bottom: 0; }

.itcare-calibration-due__serial {
	grid-area: serial;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--itcare-muted);
}

.itcare-calibration-due__date {
	grid-area: date;
	font-family: var(--itcare-font-head);
	font-size: 1.35rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	margin: 0;
}

.itcare-calibration-due__row--none .itcare-calibration-due__date {
	font-size: 1rem;
	font-weight: 500;
	color: var(--itcare-muted);
}

.itcare-calibration-due__mark {
	font-size: .9rem;
	margin-left: 2px;
	color: var(--itcare-muted);
	vertical-align: top;
}

.itcare-calibration-due__row .itcare-status { grid-area: badge; }

.itcare-calibration-form textarea { min-height: 92px; }

/* --- Request form: delivery method, ship-to, drop-off (theme 1.44.0) ---------- */

.itcare-calibration-unavailable {
	padding: 18px 22px;
	background: var(--itcare-panel);
	border-left: 4px solid var(--itcare-yellow);
	border-radius: var(--itcare-radius);
	font-size: 1.05rem;
}

.itcare-delivery__label {
	display: block;
	font-weight: 600;
	font-size: .93rem;
	margin-bottom: 8px;
}

.itcare-delivery__fixed {
	margin: 0;
	font-weight: 700;
	font-size: 1.05rem;
}

.itcare-delivery__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.itcare-delivery__option {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	font-weight: 400;
	font-size: 1rem;
	background: var(--itcare-white);
	border: 2px solid var(--itcare-grey-mid);
	border-radius: 10px;
	cursor: pointer;
}

.itcare-delivery__option input[type="radio"] { margin-top: 3px; }

.itcare-delivery__option:hover { border-color: var(--itcare-yellow); }

.itcare-delivery__option:has(input:checked) {
	border-color: var(--itcare-black);
	background: #fff8e1;
}

.itcare-delivery__text { display: flex; flex-direction: column; gap: 2px; }
.itcare-delivery__text strong { font-size: 1rem; }
.itcare-delivery__text span { font-size: .88rem; color: var(--itcare-muted); }

/* A section for one delivery method; the script hides the other. */
.itcare-cal-section {
	margin: 4px 0 14px;
	padding: 18px 20px 4px;
	background: var(--itcare-panel);
	border-radius: var(--itcare-radius);
}

.itcare-cal-section[hidden] { display: none; }

.itcare-shipto__address {
	margin: 0 0 6px;
	font-weight: 600;
	line-height: 1.5;
}

.itcare-shipto__address--pending {
	font-weight: 400;
	color: var(--itcare-muted);
}

/* The month grid is written for a narrow column; inside the two-column form
   grid it may fill the cell. */
.itcare-calibration-form .itcare-cal { max-width: 520px; margin-top: 10px; }
.itcare-calibration-form .itcare-cal__day { background: var(--itcare-white); }
.itcare-calibration-form .itcare-cal__day--off,
.itcare-calibration-form .itcare-cal__day--weekend { background: var(--itcare-grey); }
.itcare-calibration-form .itcare-cal__time { background: var(--itcare-white); }

/* History rows carry a status line under the badge, so they need more room than the
   device table's single-line cells. */
.itcare-data--history td { vertical-align: top; }
.itcare-data--history .itcare-data__note { max-width: 30ch; }

/* Add-tracking control, inline in the history table. */
.itcare-tracking-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
}

.itcare-tracking-form input[type="text"] {
	width: auto;
	min-width: 0;
	flex: 1 1 140px;
	padding: 9px 12px;
	font-size: .9rem;
	border: 2px solid var(--itcare-grey-mid);
	border-radius: 10px;
}

.itcare-tracking-form .itcare-button {
	padding: 9px 18px;
	font-size: .85rem;
}

.itcare-success {
	background: rgba(26, 127, 55, .1);
	border-left: 4px solid var(--itcare-success);
	border-radius: var(--itcare-radius-sm);
	padding: 16px 20px;
	margin: 0 0 24px;
}

.itcare-devices__empty {
	background: var(--itcare-panel);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 24px 28px;
	color: var(--itcare-muted);
	margin: 0;
}

/* Serials and dates read as columns, so they get tabular figures. */
.itcare-data__serial,
.itcare-data__date { font-variant-numeric: tabular-nums; }

.itcare-data__note {
	display: block;
	font-size: .78rem;
	color: var(--itcare-muted);
	margin-top: 4px;
}

/* Status pills. Neutral by default: a state with no explicit colour still reads as
   a badge rather than as unstyled text. */
.itcare-status {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 7px 12px;
	border-radius: var(--itcare-radius-pill);
	background: var(--itcare-grey);
	color: var(--itcare-charcoal);
	white-space: nowrap;
}

.itcare-status--verified {
	background: rgba(26, 127, 55, .12);
	color: var(--itcare-success);
}

.itcare-status--pending {
	background: rgba(255, 201, 13, .28);
	color: #7a5c00;
}

.itcare-status--problem {
	background: rgba(214, 54, 56, .12);
	color: var(--itcare-error);
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.itcare-calc__grid { grid-template-columns: 1fr 1fr; }
	.itcare-calc__controls { grid-column: 1 / -1; }
	.itcare-glance { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	.itcare-grid--3,
	.itcare-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.itcare-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 782px) {
	.itcare-header { position: static; }

	.itcare-menu-toggle { display: block; }

	/*
	 * One row only: logo left, hamburger right. The nav and the Sign in/Register
	 * buttons both drop into the panel the hamburger opens - at 320px the buttons
	 * alone are wider than the space left beside the logo, and letting them wrap
	 * onto a second row made the header 109px tall and looked broken.
	 */
	.itcare-header__inner {
		flex-wrap: wrap;
		gap: 12px;
		min-height: 64px;
	}

	.itcare-header__brand { flex: 1 1 auto; min-width: 0; }

	.itcare-nav {
		display: none;
		width: 100%;
		order: 3;
		padding-bottom: 18px;
	}

	.itcare-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	/*
	 * In the hamburger panel a dropdown makes no sense: sub-items are always
	 * visible, indented under their parent behind a rule, and the chevron goes.
	 */
	.itcare-nav .sub-menu {
		display: flex;
		position: static;
		min-width: 0;
		margin-top: 10px;
		padding: 0 0 0 14px;
		gap: 10px;
		border: 0;
		border-left: 2px solid var(--itcare-grey-mid);
		border-radius: 0;
		box-shadow: none;
	}

	.itcare-nav .sub-menu::before { display: none; }

	.itcare-nav .sub-menu a { padding: 0; border-radius: 0; }

	.itcare-nav .sub-menu a:hover { background: none; }

	.itcare-nav .menu-item-has-children > a::after { display: none; }

	.itcare-header__actions {
		display: none;
		width: 100%;
		order: 4;
		padding-bottom: 18px;
		border-top: 1px solid var(--itcare-grey-mid);
		padding-top: 18px;
	}

	.itcare-header__actions .itcare-btn { flex: 1 1 0; text-align: center; }

	.itcare-header__actions .itcare-account-menu { width: 100%; }

	.itcare-account-menu > summary { width: 100%; justify-content: center; }

	.itcare-account-menu__panel { position: static; margin-top: 10px; box-shadow: none; }

	.itcare-header.is-nav-open .itcare-nav,
	.itcare-nav.is-open { display: block; }

	.itcare-header.is-nav-open .itcare-header__actions { display: flex; }


	.itcare-section { padding: 56px 0; }
	.itcare-hero { padding: 64px 0 72px; }
	.itcare-hero--portal { padding: 40px 0 44px; }

	.itcare-grid--2,
	.itcare-grid--3,
	.itcare-grid--4 { grid-template-columns: 1fr; }

	.itcare-footer__grid { grid-template-columns: 1fr; }

	.itcare-status-list { grid-template-columns: 1fr; gap: 4px 0; }
	.itcare-status-list dd { margin-bottom: 12px; }
	.itcare-status-list li strong { margin-bottom: 12px; }

	.itcare-calc { padding: 24px 20px 26px; }
	.itcare-calc__grid { grid-template-columns: 1fr; }
	.itcare-calc__figure { font-size: 1.9rem; }
	.itcare-calc__panel { min-height: 0; }

	.itcare-glance { grid-template-columns: 1fr; }

	.itcare-form-grid { grid-template-columns: minmax(0, 1fr); }
	.itcare-form-card__body,
	.itcare-form-card__head,
	.itcare-form-card__foot { padding-left: 20px; padding-right: 20px; }
	.itcare-form-card__foot .itcare-button { width: 100%; }

	/* A phone cannot show five columns; the table scrolls inside its own border. */
	table.itcare-data,
	.itcare-data-wrap > table { min-width: 640px; }

	.itcare-data th,
	.itcare-data td { padding: 13px 16px; }
}

/* -------------------------------------------------------------------------
   Member library — Newsletters, Product Notices, FAQs
   ---------------------------------------------------------------------- */

/*
 * The small uppercase label above a library page's heading. A paragraph rather than
 * a heading, so the document outline still reads as one heading per section.
 */
.itcare-kicker {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--itcare-muted);
	margin-bottom: .6em;
}

.itcare-library { margin-top: 32px; }

.itcare-library__heading { margin-bottom: .3em; }

.itcare-library__lead {
	color: var(--itcare-muted);
	max-width: 68ch;
}

.itcare-library__more {
	margin-top: 32px;
	text-align: center;
}

.itcare-empty {
	background: var(--itcare-grey);
	border-radius: var(--itcare-radius);
	padding: 24px 28px;
	color: var(--itcare-muted);
	margin: 0;
}

/* --- Filter tabs and search ------------------------------------------- */

.itcare-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 28px;
}

.itcare-tab {
	display: inline-block;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1;
	padding: 11px 18px;
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius-pill);
	background: var(--itcare-white);
	color: var(--itcare-charcoal);
	text-decoration: none;
	white-space: nowrap;
}

.itcare-tab:hover {
	border-color: var(--itcare-black);
	color: var(--itcare-black);
}

.itcare-tab--current {
	background: var(--itcare-black);
	border-color: var(--itcare-black);
	color: var(--itcare-white);
}

/* The cross-link to another library page is not a filter, so it is set apart from
   the tabs it sits beside rather than reading as one more of them. */
.itcare-tab--aside {
	margin-left: auto;
	background: transparent;
	border-style: dashed;
}

.itcare-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.itcare-filterbar .itcare-tabs { margin-bottom: 0; }

.itcare-search {
	display: flex;
	gap: 8px;
	flex: 0 1 340px;
}

.itcare-search--wide {
	flex-basis: 100%;
	max-width: 620px;
	margin-bottom: 36px;
}

.itcare-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	font-family: inherit;
	font-size: 1rem;
	padding: 13px 18px;
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius-pill);
	background: var(--itcare-white);
	color: var(--itcare-black);
}

.itcare-search input[type="search"]:focus-visible {
	outline: 2px solid var(--itcare-black);
	outline-offset: 2px;
}

/* --- Newsletter cards -------------------------------------------------- */

/*
 * auto-fit rather than three fixed columns: the grid reflows to two and then one as
 * the viewport narrows without a breakpoint for each step, and a year holding a
 * single issue still gets a normal-width card instead of a stretched one.
 */
.itcare-cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--itcare-gap);
}

.itcare-card--issue {
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 28px;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.itcare-card__title {
	font-size: 1.2rem;
	margin: 0 0 .25em;
}

.itcare-card__title a { text-decoration: none; }

.itcare-card__title a:hover { text-decoration: underline; }

.itcare-card__date {
	font-size: .85rem;
	color: var(--itcare-muted);
	margin: 0 0 1em;
}

.itcare-card__excerpt { color: var(--itcare-charcoal); }

/* --- Product notices --------------------------------------------------- */

.itcare-noticelist {
	display: grid;
	gap: 20px;
}

.itcare-notice {
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 28px 32px;
}

.itcare-notice__date {
	font-size: .85rem;
	color: var(--itcare-muted);
	margin: 0 0 .6em;
}

.itcare-notice__title {
	font-size: 1.25rem;
	margin: 0 0 .5em;
}

.itcare-notice__title a { text-decoration: none; }

.itcare-notice__title a:hover { text-decoration: underline; }

.itcare-notice__excerpt {
	color: var(--itcare-charcoal);
	margin-bottom: 0;
}

.itcare-notice .itcare-card__cta { padding-top: 14px; }

/*
 * Notice type badges. The colour is keyed to the term slug, so renaming a term in
 * the editor keeps its colour, and a term added later simply gets the neutral
 * default rather than no styling at all.
 */
.itcare-badge {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 7px 13px;
	border-radius: var(--itcare-radius-pill);
	background: var(--itcare-grey);
	color: var(--itcare-charcoal);
	margin: 0 0 .8em;
}

.itcare-badge--new-feature { background: var(--itcare-yellow); color: var(--itcare-black); }
.itcare-badge--firmware-update { background: #e4ecfa; color: #1f3f7a; }
.itcare-badge--software-update { background: #e6f2ea; color: #14562c; }
.itcare-badge--app-update { background: #f3e9fb; color: #4d2170; }
.itcare-badge--bug-fix { background: #fbe7e7; color: #8a1f1f; }

/* --- FAQs -------------------------------------------------------------- */

.itcare-faq-layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/*
 * The category list follows the reader down a long page. `top` clears the sticky
 * site header, and max-height plus overflow keeps it usable if the list ever grows
 * taller than the viewport.
 */
.itcare-faq-nav {
	position: sticky;
	top: 96px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	background: var(--itcare-panel);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 24px;
}

.itcare-faq-nav__title {
	font-size: .95rem;
	margin-bottom: .9em;
}

.itcare-faq-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.itcare-faq-nav a {
	display: block;
	font-size: .93rem;
	padding: 8px 10px;
	border-radius: var(--itcare-radius-sm);
	color: var(--itcare-charcoal);
	text-decoration: none;
}

.itcare-faq-nav a:hover {
	background: var(--itcare-grey);
	color: var(--itcare-black);
}

/* Anchored jumps land under the sticky header rather than behind it. */
.itcare-faq-topic {
	margin-bottom: 52px;
	scroll-margin-top: 100px;
}

.itcare-faq-topic__title { font-size: 1.6rem; margin-bottom: .35em; }

.itcare-faq-topic__lead {
	color: var(--itcare-muted);
	max-width: 72ch;
}

.itcare-faq-results { color: var(--itcare-muted); }

.itcare-accordion {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}

.itcare-faq-item {
	background: var(--itcare-white);
	border: 1px solid var(--itcare-grey-mid);
	border-radius: var(--itcare-radius);
	padding: 0 26px;
}

.itcare-faq-item > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 600;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
}

/* Replace the default disclosure triangle with a marker that rotates, in both
   engines — WebKit needs its own pseudo-element hidden as well as `list-style`. */
.itcare-faq-item > summary::-webkit-details-marker { display: none; }

.itcare-faq-item > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-right: 2px solid var(--itcare-charcoal);
	border-bottom: 2px solid var(--itcare-charcoal);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
}

.itcare-faq-item[open] > summary::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.itcare-faq-item > summary:focus-visible {
	outline: 2px solid var(--itcare-black);
	outline-offset: 2px;
	border-radius: var(--itcare-radius-sm);
}

.itcare-faq-item__topic {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--itcare-muted);
	white-space: nowrap;
}

.itcare-faq-item__answer {
	padding-bottom: 24px;
	color: var(--itcare-charcoal);
}

.itcare-faq-item__answer > :last-child { margin-bottom: 0; }

@media ( prefers-reduced-motion: reduce ) {
	.itcare-faq-item > summary::after { transition: none; }
}

@media ( max-width: 900px ) {
	.itcare-faq-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Sticky suits a column beside the content; above it, it would cover the
	   answers the reader just jumped to. */
	.itcare-faq-nav {
		position: static;
		max-height: none;
	}

	.itcare-faq-nav ul {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		overflow-x: auto;
		gap: 8px;
	}
}

@media ( max-width: 640px ) {
	.itcare-filterbar { flex-direction: column; }

	.itcare-search { flex-basis: auto; width: 100%; }

	.itcare-tab--aside { margin-left: 0; }

	.itcare-notice { padding: 24px; }

	.itcare-card--issue { padding: 24px; }
}

/* -------------------------------------------------------------------------
   Basic Training pathway
   ---------------------------------------------------------------------- */

/*
 * Stages are shown whatever their state, never hidden. A member who cannot yet sit
 * the exam should still see that it exists and read what opens it — removing the card
 * would leave them with no idea the pathway continues.
 *
 * The three states are told apart by more than colour, per WCAG 1.4.1: each carries a
 * status pill in words, and a locked stage says in a sentence what unlocks it.
 */
.itcare-pathway { margin-top: 28px; }

.itcare-stage__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.itcare-stage__title { margin-bottom: .5em; }

.itcare-stage--complete {
	border-color: var(--itcare-success);
	background: var(--itcare-panel);
}

/* A locked stage is legible, not disabled-looking to the point of being unreadable:
   the text keeps full contrast and only the surface recedes. */
.itcare-stage--locked {
	background: var(--itcare-grey);
	border-style: dashed;
}

.itcare-stage__locked {
	margin: 0;
	font-size: .93rem;
	color: var(--itcare-muted);
}

.itcare-stage__meta {
	margin: 0 0 .6em;
	font-size: .9rem;
	color: var(--itcare-muted);
}

.itcare-stage__meta--warn { color: #8a5a00; }

.itcare-stage__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
}

.itcare-training-form { margin-top: 18px; }

.itcare-training-done {
	margin: 0;
	font-weight: 600;
	color: var(--itcare-success);
}

/* --- Status pills ------------------------------------------------------ */

.itcare-pill {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 7px 13px;
	border-radius: var(--itcare-radius-pill);
	white-space: nowrap;
	background: var(--itcare-grey);
	color: var(--itcare-charcoal);
}

.itcare-pill--complete { background: var(--itcare-success); color: var(--itcare-white); }
.itcare-pill--open { background: var(--itcare-yellow); color: var(--itcare-black); }
.itcare-pill--waiting { background: #e4ecfa; color: #1f3f7a; }
.itcare-pill--locked { background: var(--itcare-grey-mid); color: var(--itcare-charcoal); }

/* --- Notices ------------------------------------------------------------ */

.itcare-notice--success {
	background: #e6f2ea;
	border: 1px solid var(--itcare-success);
	color: #14562c;
	border-radius: var(--itcare-radius);
	padding: 18px 22px;
}

.itcare-notice--error {
	background: #fbe7e7;
	border: 1px solid var(--itcare-error);
	color: #8a1f1f;
	border-radius: var(--itcare-radius);
	padding: 18px 22px;
}

.itcare-notice--error ul {
	margin: 0;
	padding-left: 20px;
}

@media ( max-width: 640px ) {
	.itcare-stage__head { flex-direction: column; align-items: flex-start; gap: 8px; }

	.itcare-stage__actions > .itcare-button { width: 100%; text-align: center; }
}

/* --- Training team (trainee roster overview) ---------------------------- */

/*
 * The [itcare_trainees] overview: a seat-capacity band, then one card per
 * trainee. The band lays its figures, note and button on one line and wraps
 * on small screens; trainee cards do the same.
 */

.itcare-seatband { margin-bottom: 28px; }

.itcare-seatband__label {
	margin: 0 0 10px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--itcare-muted);
}

.itcare-seatband__row {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.itcare-seatband__stat {
	font-size: 1rem;
	white-space: nowrap;
}

.itcare-seatband__stat strong {
	font-size: 1.7rem;
	font-weight: 800;
	margin-right: 4px;
}

.itcare-seatband__stat--free,
.itcare-seatband__stat--free strong { color: var(--itcare-success); }

.itcare-seatband__note {
	flex: 1 1 240px;
	font-size: .85rem;
	color: var(--itcare-muted);
}

.itcare-trainees__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.itcare-trainees__head h3 { margin: 0; }

.itcare-trainee {
	display: flex;
	/* The .itcare-card base is a column (for bottom-aligned CTAs); this card is a row. */
	flex-direction: row;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	height: auto;
	padding: 22px 28px;
	margin-bottom: 16px;
}

.itcare-trainee__who {
	flex: 0 0 170px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.itcare-trainee__seat {
	font-size: .82rem;
	color: var(--itcare-muted);
}

.itcare-trainee__progress {
	flex: 1 1 180px;
	font-size: .92rem;
}

.itcare-trainee__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-wrap: wrap;
}

.itcare-trainee__manage summary {
	cursor: pointer;
	font-size: .9rem;
	font-weight: 600;
	color: var(--itcare-muted);
}

.itcare-trainee__manage[open] summary { margin-bottom: 10px; }

.itcare-trainee__manage .itcare-training-form {
	margin-top: 10px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.itcare-trainees__former {
	margin: 22px 0;
}

.itcare-trainees__former > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--itcare-muted);
}

.itcare-trainees__former-row {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 14px 0;
	border-bottom: 1px solid var(--itcare-grey-mid);
}

.itcare-trainees__addcard { margin-top: 28px; }

.itcare-trainees__addcard h3 { margin-bottom: .4em; }

.itcare-trainees__add {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.itcare-trainees__add input[type="text"],
.itcare-trainees__add input[type="email"] { flex: 1 1 220px; }

@media ( max-width: 640px ) {
	.itcare-seatband__row { gap: 16px; }

	.itcare-trainee { align-items: flex-start; flex-direction: column; gap: 10px; }

	.itcare-trainee__actions { margin-left: 0; }
}

/* --- Trainee page (one trainee's record) -------------------------------- */

.itcare-traineepage__back { margin-bottom: 20px; }

.itcare-traineepage__back a {
	text-decoration: none;
	font-weight: 600;
}

.itcare-traineepage__back a:hover { text-decoration: underline; }

.itcare-traineepage__head {
	/* Row, against the .itcare-card column base: identity left, pills right. */
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	height: auto;
	margin-bottom: 24px;
}

.itcare-traineepage__who h2 { margin: 0 0 .2em; }

.itcare-traineepage__meta {
	margin: 0;
	color: var(--itcare-muted);
	font-size: .92rem;
}

.itcare-examcard {
	height: auto;
	margin-bottom: 20px;
}

.itcare-examcard__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.itcare-examcard__head h3 { margin: 0; }

.itcare-examcard__meta {
	margin: 8px 0 16px;
	color: var(--itcare-muted);
}

.itcare-examcard .itcare-notice--success { margin-top: 16px; }

/*
 * The attempts table inside an exam card. The shared .itcare-table-wrap gives
 * the border and horizontal scroll; the cells themselves had no rules, so the
 * browser's defaults applied - centred bold headings over left-aligned cells.
 */
.itcare-table th,
.itcare-table td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--itcare-grey-mid);
	font-size: .96rem;
}

.itcare-table thead th {
	background: var(--itcare-grey);
	color: var(--itcare-charcoal);
	font-family: var(--itcare-font-head);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.itcare-table tbody tr:last-child td { border-bottom: 0; }

.itcare-table th:nth-child(3),
.itcare-table td:nth-child(3),
.itcare-table th:nth-child(4),
.itcare-table td:nth-child(4) {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.itcare-table td .itcare-pill { vertical-align: middle; }

@media ( max-width: 640px ) {
	.itcare-traineepage__head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --- Trainee learning path ---------------------------------------------- */

.itcare-tpath__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.itcare-tpath__title { margin: 0 0 .2em; }

.itcare-tpath__sub {
	margin: 0 0 24px;
	color: var(--itcare-muted);
}

.itcare-tpath__id {
	/* Row, against the .itcare-card column base: identity left, standing right. */
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	height: auto;
	margin-bottom: 24px;
}

.itcare-tpath__who h3 { margin: 0 0 .2em; }

.itcare-tpath__meta {
	margin: 0;
	color: var(--itcare-muted);
	font-size: .92rem;
}

.itcare-tpath__standing {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.itcare-tpath__attempts {
	margin: 0;
	font-weight: 600;
}

.itcare-tstage {
	height: auto;
	margin-bottom: 16px;
}

.itcare-tstage .itcare-stage__actions {
	display: flex;
	justify-content: flex-end;
}

.itcare-tpath__note h3 { margin-bottom: .3em; }

/*
 * Standalone shortcode blocks carry their own container.
 *
 * The portal, portal-page and full-width templates all render the_content()
 * bare: every iTCare pattern brings its own .itcare-section > .itcare-container,
 * so wrapping again would nest a section inside a section. A shortcode block
 * added to a page on its own has neither wrapper, which left its output running
 * into the viewport edges and ignoring the width set on the block. These
 * member-facing wrappers therefore centre themselves at the container width and
 * take the same 24px side padding as every pattern, so a hand-placed shortcode
 * lines up with the sections above and below it.
 */
.itcare-tpath__header,
.itcare-tpath,
.itcare-traineepage,
.itcare-trainees {
	width: 100%;
	max-width: var(--itcare-container);
	margin-inline: auto;
	padding-inline: 24px;
}

/*
 * Inside a container the block is already placed and padded, so the band stands
 * down — a pattern-placed shortcode must not be indented twice.
 */
.itcare-container .itcare-tpath__header,
.itcare-container .itcare-tpath,
.itcare-container .itcare-traineepage,
.itcare-container .itcare-trainees {
	max-width: none;
	padding-inline: 0;
}

/*
 * Except as a direct child of .entry-content, where the editor content width
 * above still governs. page.php puts both classes on one element, so the
 * stand-down rule matches there too and would otherwise widen page content.
 */
.entry-content > .itcare-tpath__header,
.entry-content > .itcare-tpath,
.entry-content > .itcare-traineepage,
.entry-content > .itcare-trainees { max-width: 780px; }

/* The trainee-context header on stage pages (name, seat, Back to Training). */
.itcare-tpath__header { margin-block: 40px 26px; }

.itcare-container .itcare-tpath__header { margin-block: 0 26px; }

.itcare-tpath__header .itcare-tpath__sub { margin-bottom: 14px; }

/* The embedded ClassMarker test (script embed or iframe fallback). */
.itcare-exam-embed {
	margin-top: 20px;
	border-radius: var(--itcare-radius-sm);
	overflow: hidden;
	background: var(--itcare-grey);
}

.itcare-exam-embed iframe { display: block; width: 100%; border: 0; }

/* Stage 3 exam pages: the pass-mark line and the per-trainee launch rows. */
.itcare-stage__passmark { font-weight: 600; color: var(--itcare-charcoal); }

.itcare-trainee-picker { margin-top: 20px; }

.itcare-trainee-picker__row { height: auto; padding: 18px 22px; }

.itcare-trainee-picker__row .itcare-stage__meta { margin-bottom: 0; }

.itcare-trainee-picker__row .itcare-stage__actions { margin-top: 12px; }

@media ( max-width: 640px ) {
	.itcare-tpath__id { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* -------------------------------------------------------------------------
   Contact page
   ---------------------------------------------------------------------- */

/*
 * Form on the left, reference details on the right. The columns are set as block
 * widths in the pattern so an editor can drag them; these rules only handle the
 * spacing and the stacking order.
 */
.itcare-contact-layout { gap: var(--itcare-gap); align-items: start; }

.itcare-contact-form { max-width: none; }

/* The design runs every field the full width of the card, message included. */
.itcare-contact-form .itcare-field { margin-bottom: 20px; }

.itcare-contact-form .itcare-field:last-child { margin-bottom: 0; }

.itcare-contact-form textarea { min-height: 150px; }

/* The placeholder option reads as a prompt, not as a chosen value. */
.itcare-contact-form select:invalid { color: var(--itcare-muted); }

.itcare-contact-form .itcare-form-card__foot .itcare-hint { max-width: 40ch; }

/* --- Contact information panel ----------------------------------------- */

.itcare-contact-info { gap: 0; }

.itcare-contact-info__label {
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--itcare-muted);
	margin: 22px 0 .3em;
}

/* The first label sits under the panel heading, which already has its own space. */
.itcare-contact-info > .itcare-contact-info__label:first-of-type { margin-top: 0; }

.itcare-contact-info__value {
	margin: 0;
	line-height: 1.5;
	/* Addresses and long support emails have no break opportunity of their own. */
	overflow-wrap: break-word;
}

.itcare-contact-info__value a { font-weight: 600; }

/* The "prefer to speak to someone" panel below the details. */
.itcare-contact-call { margin-top: 20px; }

.itcare-contact-call p { margin-bottom: 0; }

.itcare-contact-call .itcare-actions { margin-top: 16px; }

@media ( max-width: 781px ) {
	/* WordPress stacks columns below 782px. Keep the details under the form —
	   someone who came here to write a message should not scroll past an address
	   to reach the box. */
	.itcare-contact-layout { gap: 24px; }
}

/* -------------------------------------------------------------------------
   Silver checkout
   ---------------------------------------------------------------------- */

.itcare-checkout-step {
	font-size: 1.15rem;
	color: var(--itcare-muted);
	margin: 32px 0 18px;
}

/*
 * The generic .itcare-field rules make every input full width with text-field
 * padding — right for text boxes, wrong for a tick box, which then sat alone on
 * its own line above the serial number. Tick boxes and radios anywhere in a
 * form keep their natural size.
 */
.itcare-field input[type="checkbox"],
.itcare-field input[type="radio"],
.itcare-form input[type="checkbox"],
.itcare-form input[type="radio"] {
	width: 1.15em;
	height: 1.15em;
	padding: 0;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--itcare-black);
	cursor: pointer;
}

.itcare-checkout-form .itcare-checkout-device {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--itcare-grey-mid);
}

.itcare-checkout-form .itcare-checkout-device:first-child { padding-top: 0; }

.itcare-checkout-form .itcare-checkout-device:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* Tick box, serial and model on one line, all clickable. */
.itcare-checkout-device label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	cursor: pointer;
}

.itcare-checkout-device label strong { font-weight: 700; letter-spacing: .01em; }

.itcare-checkout-device label .itcare-hint { font-size: .93rem; }

.itcare-checkout-device__position {
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--itcare-black);
	background: var(--itcare-panel);
	border-radius: 999px;
	padding: 5px 12px;
	white-space: nowrap;
}

/* --- Choosing a billing cycle ------------------------------------------ */

/*
 * Two options side by side so they are compared rather than read in sequence —
 * the annual saving is only meaningful next to the monthly figure.
 */
.itcare-checkout-cycles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--itcare-gap);
	margin-bottom: 28px;
}

.itcare-checkout-cycle__price {
	font-size: 1.6rem;
	line-height: 1.2;
	margin-bottom: .4em;
}

.itcare-checkout-cycle__price strong { font-size: 2rem; }

/* --- The total --------------------------------------------------------- */

/* Stated once, large. A customer about to commit for twelve months should not
   have to hunt for the number they are agreeing to. */
.itcare-checkout-total { margin: 24px 0; }

.itcare-checkout-total__figure {
	font-size: 1.3rem;
	margin-bottom: .4em;
}

.itcare-checkout-total__figure strong { font-size: 2.1rem; }

/* --- Disclosures ------------------------------------------------------- */

.itcare-checkout-disclosures { margin: 24px 0; }

.itcare-checkout-disclosures dl { margin: 0; }

.itcare-checkout-disclosures dt {
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .02em;
	margin-top: 16px;
}

.itcare-checkout-disclosures dt:first-of-type { margin-top: 0; }

.itcare-checkout-disclosures dd {
	margin: 4px 0 0;
	color: var(--itcare-charcoal);
}

/* --- Acceptance -------------------------------------------------------- */

.itcare-checkout-accept { margin-top: 24px; }

/*
 * The consent row is given room deliberately. It is the single most consequential
 * control on the page, and a tick box crowded against body text is one people
 * click without reading.
 */
.itcare-checkout-consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 18px;
	background: var(--itcare-grey);
	border-radius: var(--itcare-radius-sm);
}

.itcare-checkout-consent label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-weight: 500;
	cursor: pointer;
}

.itcare-checkout-consent input[type="checkbox"] {
	margin-top: 3px;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.itcare-founding {
	background: #fff8e1;
	border: 1px solid var(--itcare-yellow);
}

@media ( max-width: 640px ) {
	.itcare-checkout-device__position { margin-left: calc(1.15em + 12px); }

	.itcare-checkout-accept .itcare-form-card__foot .itcare-button {
		width: 100%;
		text-align: center;
	}
}

/* The Silver quote panel on My Account. Full width above the card grid — an
   accepted quote outranks the six cards when there is one. */
.itcare-silver-status { margin-bottom: var(--itcare-gap); }

.itcare-silver-status .itcare-status-list { margin-bottom: 16px; }

.itcare-silver-status--expired { border-color: var(--itcare-grey-mid); background: var(--itcare-grey); }

/* --- Silver Training: video library (theme 1.38.0) ---------------------------
   Cards from [itcare_video_library]. A watched card borrows the completed-stage
   treatment (green border, panel background) and says "Watched" in words on a
   pill, per WCAG 1.4.1. The picker above the grid chooses whose record shows. */
.itcare-video-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
}

.itcare-video-picker label { font-weight: 600; }

.itcare-video-picker select {
	min-width: 220px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--itcare-black);
	background: var(--itcare-white);
	border: 2px solid var(--itcare-grey-mid);
	border-radius: 10px;
}

.itcare-video-summary {
	margin: 0 0 20px;
	color: var(--itcare-muted);
	font-weight: 600;
}

/* Two videos per row: the player needs the width, and four across left it
   postage-stamp sized (Maria, 2026-09-22). */
.itcare-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media ( max-width: 720px ) {
	.itcare-video-grid { grid-template-columns: minmax(0, 1fr); }
}

.itcare-videocard { gap: 10px; }

.itcare-videocard__kicker {
	margin: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--itcare-muted);
}

.itcare-videocard .itcare-card__title { margin: 0; }

.itcare-videocard .itcare-card__date {
	margin: 0;
	font-size: .9rem;
	color: var(--itcare-muted);
}

.itcare-videocard .itcare-card__excerpt { margin: 0; }

.itcare-videocard .itcare-video {
	position: relative;
	max-width: 100%;
	margin: 6px 0 0;
	aspect-ratio: 16 / 9;
	background: var(--itcare-black);
}

/* The provider iframe brings its own size (portrait for Shorts); the card
   frame wins, so every video sits in the same 16:9 box. */
.itcare-videocard .itcare-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.itcare-videocard__state { margin-top: auto; padding-top: 12px; }

.itcare-videocard__state .itcare-training-form { margin-top: 0; }

.itcare-videocard--watched {
	border-color: var(--itcare-success);
	background: var(--itcare-panel);
}

.itcare-webinar__when {
	margin: 0 0 10px;
	font-size: 1.1rem;
	font-weight: 700;
}

.itcare-webinar__details {
	margin: 0 0 16px;
	color: var(--itcare-muted);
	overflow-wrap: anywhere;
}

.itcare-webinar__label { margin: 0 0 8px; font-weight: 600; }

.itcare-webinar__list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.itcare-webinar__list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.itcare-webinar-form,
.itcare-call-form { margin-top: 18px; }

.itcare-webinar-form,
.itcare-call-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.itcare-webinar-form label,
.itcare-call-form label { font-weight: 600; }

.itcare-webinar-form select,
.itcare-webinar-form input[type="email"],
.itcare-call-form select,
.itcare-call-form input[type="text"],
.itcare-call-form input[type="tel"] {
	width: 100%;
	max-width: 420px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--itcare-black);
	background: var(--itcare-white);
	border: 2px solid var(--itcare-grey-mid);
	border-radius: 10px;
}

.itcare-webinar-form .itcare-button,
.itcare-call-form .itcare-button { align-self: flex-start; margin-top: 6px; }

.itcare-call__when { font-size: 1.1rem; }

/* --- Silver call booking calendar (theme 1.42.1, server-rendered) -------------
   Month grid from [itcare_book_call]. Weekdays with open times are links that
   reload the page with that day chosen; weekends are links too, so the member
   is told they are unavailable; the chosen day's times are radio pills. */
.itcare-cal { max-width: 440px; }

.itcare-cal__label { margin: 0; font-weight: 600; }

.itcare-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 8px;
}

.itcare-cal__month { font-size: 1.05rem; }

.itcare-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--itcare-black);
	text-decoration: none;
	background: var(--itcare-white);
	border: 2px solid var(--itcare-grey-mid);
	border-radius: 10px;
}

.itcare-cal__nav:hover { border-color: var(--itcare-yellow); }

.itcare-cal__nav--off { opacity: .35; }

.itcare-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.itcare-cal__wd {
	padding: 4px 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
	color: var(--itcare-muted);
}

.itcare-cal__day {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	font-weight: 600;
	color: var(--itcare-black);
	text-decoration: none;
	background: var(--itcare-grey);
	border: 2px solid transparent;
	border-radius: 10px;
}

.itcare-cal__day--open {
	background: var(--itcare-white);
	border-color: var(--itcare-grey-mid);
}

.itcare-cal__day--open:hover,
.itcare-cal__day--open:focus-visible { border-color: var(--itcare-yellow); }

.itcare-cal__day--weekend {
	font-weight: 400;
	color: var(--itcare-muted);
	text-decoration: line-through;
}

.itcare-cal__day--off {
	font-weight: 400;
	color: var(--itcare-muted);
}

.itcare-cal__day--selected,
.itcare-cal__day--selected:hover {
	background: var(--itcare-yellow);
	border-color: var(--itcare-yellow);
}

.itcare-cal__times { margin-top: 14px; }

.itcare-cal__times-label { margin: 0 0 8px; font-weight: 600; }

.itcare-cal__msg {
	margin: 0;
	padding: 12px 14px;
	font-weight: 600;
	background: var(--itcare-grey);
	border-radius: 10px;
}

.itcare-cal__times-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.itcare-cal__time {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px 8px 10px;
	font-weight: 600;
	color: var(--itcare-black);
	background: var(--itcare-white);
	border: 2px solid var(--itcare-grey-mid);
	border-radius: 999px;
	cursor: pointer;
}

.itcare-cal__time input { margin: 0; accent-color: var(--itcare-black); }

.itcare-cal__time:hover { border-color: var(--itcare-yellow); }

.itcare-cal__time:has(input:checked) {
	color: var(--itcare-yellow);
	background: var(--itcare-black);
	border-color: var(--itcare-black);
}

/* A pattern dropped on the default page template (not the portal template)
   still spans the page: the pattern brings its own container. */
.entry-content > .itcare-section { max-width: none; }

/* --- Silver webinars: several dates on one page (theme 1.42.2) ---------------- */
.itcare-webinar__item + .itcare-webinar__item {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 2px solid var(--itcare-grey-mid);
}

.itcare-webinar__title { margin: 0 0 6px; font-size: 1.3rem; }

/* -------------------------------------------------------------------------
   Phone touch targets and scroll hints (theme 1.49.2, responsive audit)
   ---------------------------------------------------------------------- */

@media (max-width: 782px) {
	/*
	 * In the hamburger panel each menu link is a full-width 44px row. Without
	 * the padding a link was only as tall as its text (about 22px), well under
	 * the WCAG 2.2 target size, and two links could be hit with one thumb.
	 * The list gap shrinks to keep the panel the same height.
	 */
	.itcare-nav ul { gap: 2px; }

	.itcare-nav a {
		display: block;
		padding: 11px 0;
		min-height: 44px;
		box-sizing: border-box;
	}

	.itcare-nav .sub-menu { gap: 0; margin-top: 4px; }

	.itcare-nav .sub-menu a { padding: 10px 0; }

	/*
	 * Tables wider than a phone scroll inside their border (min-width above).
	 * Nothing showed that, so the right-hand columns were easy to miss; a
	 * one-line hint above the table says so. It scrolls away with the first
	 * swipe, which is the point.
	 */
	.itcare-table-wrap::before,
	.itcare-data-wrap::before,
	.itcare-calc__table-wrap::before,
	figure.wp-block-table.itcare-compare::before {
		content: "Swipe sideways to see every column";
		display: block;
		padding: 8px 14px;
		font-size: .78rem;
		color: var(--itcare-muted);
		border-bottom: 1px solid var(--itcare-grey-mid);
	}
}


/* Founding Members home section (1.51.0): the "How to join" steps and the
   live banner spacing. */
.itcare-steps { margin: 0 0 16px; padding-left: 1.4em; max-width: 760px; }
.itcare-steps li { margin-bottom: .5em; }
.itcare-section .itcare-founding { margin: 0 0 var(--itcare-gap); }

/* Newsletter issues on the website (1.51.2). An issue pasted from an email
   design is a fixed 600px column (class "wrap"), the right width for inboxes but
   narrow on a desktop page. On newsletter pages only, the content area widens
   and the email is scaled up as a whole, so its layout and images keep their
   proportions; phones and the emails themselves are unchanged. */
@media ( min-width: 1100px ) {
	.single-itcare_newsletter .entry-content > * { max-width: 1040px; }
	.single-itcare_newsletter .entry-content .wrap { zoom: 1.45; }
}

@media ( min-width: 900px ) and ( max-width: 1099.98px ) {
	.single-itcare_newsletter .entry-content .wrap { zoom: 1.2; }
}