@charset "UTF-8";
/**
 * Catcha 2026 — third-party overrides
 *
 * 24 Document library (FileBird) / 25 Article (Elementor Theme Builder)
 * 26 Bursa announcement / 27 Legal documents / 28 Subscribe embed
 *
 * Elementor loads after this theme, so equal specificity loses. The
 * !important and long selectors in here are deliberate.
 *
 * One slice of the stylesheet. Load order and what lives where:
 * docs/MAP.md at the repo root.
 */

/* =====================================================================
 * 24  DOCUMENT LIBRARY  (FileBird — Investor Relations sub-pages)
 *
 * Shareholders Meeting, Corporate Governance and Reports & Presentations
 * are file listings rendered by the FileBird plugin. They inherited the
 * 66ch prose measure, which squeezed a five-column table into 600px and
 * pushed its Download column off the end; page.php now hands those pages
 * `--wide` instead. The rest of this block replaces the plugin's stock
 * chrome — a WordPress-blue folder mark and default table — with the same
 * ruled table used elsewhere in the theme.
 * ================================================================== */
.entry-content--wide { max-width: none; }

/* Long-form pages (Terms, Privacy) are a single 66ch column. Pinned to the
   left of a 1200px shell it read as broken layout — half the page empty. It
   is centred, and given a rule and a surface so it reads as a document
   rather than as text adrift on the page. */
.entry-content.prose {
	max-width: 74ch;
	margin-inline: auto;
	padding: clamp(28px, 3.4vw, 56px) clamp(22px, 3vw, 48px);
	background: var(--surface);
	border: 1px solid var(--line);
}

/* These pages are still Elementor documents, and their nested containers
   carry the old build's banner rhythm — `padding: 160px 0 80px` on one,
   `80px 0 100px` on the next. Stacked on top of the theme's own section
   padding that opened ~250px of dead space above the file list. The theme
   owns page spacing now, so the inherited block padding is dropped and the
   top-level containers get an ordinary gap instead. */
.entry-content .e-con,
.entry-content .e-con-inner { padding-block: 0 !important; }
.entry-content .e-con + .e-con { margin-top: clamp(26px, 3vw, 44px); }

.njt-fbdl { width: 100%; }
/* Squares everything the plugin rounds, including the grid layout's cards
   and its pagination, in one place. */
.njt-fbdl, .njt-fbdl * { border-radius: 0 !important; }

.njt-fbdl .fbdl-search-control-wrapper { padding: 0; }
.njt-fbdl .fbdl-title {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--ink);
}
.njt-fbdl .fbdl-title svg { width: 26px; height: auto; flex: none; }
/* The plugin hard-codes #007CBA on the path. */
.njt-fbdl .fbdl-title svg path { fill: var(--accent); }
/* The folder name is a caption for the table below it, not a page title —
   the page header already carries that. Sized accordingly. */
.njt-fbdl .fbdl-title h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.014em;
	color: var(--ink);
}

.njt-fbdl .fbdl-layout-control-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line) !important;
}
.njt-fbdl .fbdl-layout-control-limit {
	font-family: var(--label);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.njt-fbdl .fbdl-layout-control-limit input {
	width: 64px;
	padding: 6px 8px;
	margin-inline: 8px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 0;
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink);
}
.njt-fbdl .fbdl-layout-control-display { display: flex; gap: 2px; }
.njt-fbdl .fbdl-layout-control-display span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	color: var(--ink-4);
	cursor: pointer;
	transition: color var(--dur) var(--ease);
}
.njt-fbdl .fbdl-layout-control-display span:hover { color: var(--ink) !important; }
/* The selected layout icon is the plugin's #007CBA; its paths draw with
   currentColor, so recolouring the SVG is enough. */
.njt-fbdl .fbdl-layout-control-display span svg { color: var(--ink-4) !important; }
.njt-fbdl .fbdl-layout-control-display span svg.fbdl-layout-control-display-selected { color: var(--accent) !important; }

/* The plugin's own stylesheet loads after the theme's and ships 12px radii,
   2px grey row borders, row shadows and a #007CBA pill on every Download
   button. `!important` is the honest tool here: these are deliberate
   overrides of a third party's chrome, the same approach taken with The
   Events Calendar above. */
.njt-fbdl .fbdl-table { width: 100%; border-collapse: collapse !important; font-size: 15px; }
.njt-fbdl .fbdl-table thead tr,
.njt-fbdl .fbdl-table tbody tr {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* The plugin sizes the header cell's inner <div>, not the <th>, so the type
   scale has to be set on both or the row renders at 16px. */
.njt-fbdl .fbdl-table thead th,
.njt-fbdl .fbdl-table thead th div {
	font-family: var(--label) !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.15em !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	color: var(--ink-3) !important;
}
.njt-fbdl .fbdl-table thead th {
	padding: 13px 14px !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line-firm) !important;
	border-radius: 0 !important;
	text-align: left;
	white-space: nowrap;
}
.njt-fbdl .fbdl-table-last-header { text-align: right !important; }
.njt-fbdl .fbdl-table tbody tr { transition: background-color var(--dur) var(--ease); }
.njt-fbdl .fbdl-table tbody tr:hover { background: var(--hover-surface) !important; }
.njt-fbdl .fbdl-table tbody td {
	padding: 15px 14px !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line-soft) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	vertical-align: middle;
	color: var(--ink-2);
	white-space: nowrap;
}
.njt-fbdl .fbdl-list-first-item { white-space: normal; width: 100%; }
.njt-fbdl .fbdl-list-item-icon { display: flex; align-items: center; gap: 12px; }
.njt-fbdl .fbdl-list-item-icon-wrapper { flex: none; }
.njt-fbdl .fbdl-list-item-icon-wrapper img { width: 20px; height: 20px; }
.njt-fbdl .fbdl-list-item-title a {
	color: var(--ink) !important;
	font-weight: 600;
	text-decoration: none;
}
.njt-fbdl .fbdl-list-item-title a:hover {
	color: var(--accent) !important;
	text-decoration: underline;
	text-underline-offset: 0.16em;
}
.njt-fbdl .fbdl-list-last-item { text-align: right !important; }
.njt-fbdl .fbdl-list-last-item a {
	display: inline-block;
	padding: 9px 18px !important;
	background: transparent !important;
	border: 1px solid var(--line-firm) !important;
	border-radius: 0 !important;
	font-family: var(--label);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink) !important;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur) var(--ease),
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}
.njt-fbdl .fbdl-list-last-item a:hover {
	background: var(--ink) !important;
	border-color: var(--ink) !important;
	color: #fff !important;
}

/* Wide tables must scroll inside their own box rather than widen the page. */
.njt-fbdl .fbdl-listview-container { overflow-x: auto; }

/* Pagination — the plugin's #007CBA again. */
.njt-fbdl .fbdl-pagination-page-number { display: flex; gap: 4px; }
.njt-fbdl .fbdl-page-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px; height: 34px;
	padding: 0 10px;
	border: 1px solid var(--line) !important;
	font-family: var(--label);
	font-size: 11px;
	font-weight: 600;
	color: var(--ink-3) !important;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.njt-fbdl .fbdl-page-number:hover { background: var(--ground) !important; color: var(--ink) !important; }
.njt-fbdl .fbdl-page-number.fbdl-selected {
	background: var(--accent) !important;
	border-color: var(--accent) !important;
	color: #fff !important;
}

/* Elementor's year tabs on Reports & Presentations. */
.elementor-widget-tabs .elementor-tabs-wrapper {
	display: flex;
	flex-wrap: wrap;
	border: 0;
	border-bottom: 1px solid var(--line);
}
.elementor-widget-tabs .elementor-tab-title {
	padding: 12px 20px !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	font-family: var(--label) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-3) !important;
	cursor: pointer;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.elementor-widget-tabs .elementor-tab-title:hover { color: var(--ink) !important; }
.elementor-widget-tabs .elementor-tab-title.elementor-active {
	color: var(--accent) !important;
	border-bottom-color: var(--accent) !important;
}
.elementor-widget-tabs .elementor-tab-content {
	border: 0 !important;
	padding: clamp(22px, 2.6vw, 34px) 0 0 !important;
}

/* =====================================================================
 * 25  ARTICLE  (Elementor Theme Builder single template)
 *
 * Posts are not rendered by this theme's single.php. Elementor Pro's Theme
 * Builder registers a `single` location that wins on template_include, so
 * every press release comes out of an Elementor template with its own
 * two-column layout and sidebar. Rather than disable it — the search box and
 * recent-posts list are wanted — the template is dressed in the theme's own
 * type, colour and geometry here.
 * ================================================================== */

/* Post title */
.elementor-location-single .elementor-widget-theme-post-title .elementor-heading-title {
	font-family: var(--serif);
	font-size: clamp(26px, 2.8vw, 38px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.022em;
	color: var(--ink);
}

/* By-line. Three separate text-editor widgets — date, "/ by", author — sat in
   a flex row with 17px paragraph margins, and the middle one is only 38px
   wide, so "/ by" wrapped onto its own line below the other two. Margins
   zeroed, wrapping off, and the row set as one caps meta line. */
/* Set on the widget, not on `p`: only the middle one wraps its text in a
   paragraph — the date and author widgets hold bare text nodes, so a
   `p`-only rule styled "/ by" and left the other two alone. */
.elementor-location-single .elementor-widget-text-editor {
	align-self: center;
	font-family: var(--label);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.7;
	color: var(--ink-3);
	white-space: nowrap;
}
.elementor-location-single .elementor-widget-text-editor p {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Body copy */
.elementor-location-single .elementor-widget-theme-post-content {
	font-size: var(--fs-body);
	line-height: 1.72;
	color: var(--ink-2);
}
.elementor-location-single .elementor-widget-theme-post-content p { margin: 0 0 1.05em; }
.elementor-location-single .elementor-widget-theme-post-content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 0.16em;
	overflow-wrap: anywhere;
}

/* Featured image */
.elementor-location-single .elementor-widget-theme-post-featured-image img {
	border: 1px solid var(--line);
	border-radius: 0;
}

/* Sidebar section headings — the post title is also a heading widget, hence
   the :not(). */
.elementor-location-single .elementor-widget-heading:not(.elementor-widget-theme-post-title) .elementor-heading-title {
	font-family: var(--label);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ink);
}

/* Search */
.elementor-location-single .e-search-form {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 1px solid var(--line-firm);
	background: var(--surface);
}
.elementor-location-single .e-search-input-wrapper { flex: 1 1 auto; min-width: 0; display: flex; }
.elementor-location-single .e-search-input {
	width: 100%;
	padding: 12px 12px;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-family: var(--sans);
	/* The sidebar column is narrow; at 14.5px the placeholder was clipped. */
	font-size: 13.5px;
	color: var(--ink);
	box-shadow: none;
	text-overflow: ellipsis;
}
.elementor-location-single .e-search-input:focus { outline: 0; }
.elementor-location-single .e-search-form:focus-within { border-color: var(--accent); }
.elementor-location-single .e-search-submit {
	flex: none;
	padding: 0 20px;
	background: var(--ink);
	border: 0;
	border-radius: 0;
	color: #fff;
	font-family: var(--label);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease);
}
.elementor-location-single .e-search-submit:hover { background: var(--accent); }
/* Elementor's search widget CSS loads after ours and sets a 56px
   min-height, 16px/24px padding and 15–17px type — a 70px slab in a
   narrow sidebar. Held to a 40px bar with small type, as a utility. */
.elementor-location-single .e-search-input {
	min-height: 0 !important;
	height: 40px !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	line-height: 40px !important;
}
.elementor-location-single .e-search-submit {
	min-height: 0 !important;
	height: 40px !important;
	padding: 0 16px !important;
	font-size: 10px !important;
	line-height: 1 !important;
}
.elementor-location-single .e-search-submit * { font-size: inherit !important; line-height: 1 !important; }

/* Recent-post cards */
.elementor-location-single .elementor-post { margin-bottom: 22px; }
.elementor-location-single .elementor-post__thumbnail__link { display: block; border: 1px solid var(--line); }
.elementor-location-single .elementor-post__title {
	margin: 12px 0 4px;
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.26;
	letter-spacing: -0.012em;
}
.elementor-location-single .elementor-post__title a {
	color: var(--ink);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
.elementor-location-single .elementor-post__title a:hover { color: var(--accent); }
.elementor-location-single .elementor-post-date,
.elementor-location-single .elementor-post__meta-data {
	font-family: var(--label);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink-4);
}

/* =====================================================================
 * 26  BURSA ANNOUNCEMENT  (Elementor link grid)
 *
 * 24 links out to Bursa Malaysia's announcement feeds, still rendered from
 * the old build's Elementor document. Three things were wrong:
 *
 * 1  It inherited the prose measure, so a 24-cell grid was laid out in two
 *    ~200px columns inside a 719px card and two thirds of the titles
 *    wrapped to two or three lines, with the rest of the page empty.
 *    page.php hands this page `--index`, which drops the measure.
 * 2  Every cell carried a red 1px underline and a 30px grey hover glow —
 *    leftovers from a build with radii and elevation. They are replaced by
 *    the ruled-grid treatment every other card set in the theme uses (§03):
 *    rules drawn by the cells, hover changes value, nothing lifts.
 * 3  The page opens with a container whose only widget is an empty heading,
 *    which rendered as a 1px rule over a band of accent background — a
 *    banner from the old build with its text taken out.
 * ================================================================== */

/* (3) A top-level container holding no content of any kind. */
.entry-content--index > .elementor > .e-con:not(:has(a, p, img, li, h1, h2, h3, h4, h5, h6)) {
	display: none;
}
/* …which still counts as a sibling, so the gap it would open is dropped. */
.entry-content--index .e-con + .e-con { margin-top: 0; }

/* Elementor caps its boxed containers at 1140px and, under 1100px, pads them
   by a further 30px a side — so the grid sat inset from the page title above
   it at every width but the widest. The theme owns page gutters (§03), so
   the inherited ones go, the same way the block padding already did. */
.entry-content--index .e-con-inner { max-width: none !important; }
.entry-content--index .e-con,
.entry-content--index .e-con-inner { padding-inline: 0 !important; }

/* (1) Elementor drives its grid columns through
   `--e-con-grid-template-columns`, set on an ID-length selector nothing
   here can outweigh, so the resolved properties are overridden instead.
   The explicit `repeat(11, 1fr)` rows go with them: they were authored for
   a shorter list and force every row to equal height. */
.entry-content--index .e-grid {
	grid-template-columns: minmax(0, 1fr) !important;
	grid-template-rows: auto !important;
	gap: 0 !important;
	padding: 0 !important;
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
@media (min-width: 620px) {
	.entry-content--index .e-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1000px) {
	.entry-content--index .e-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* (2) The cells. */
.entry-content--index .hover-container {
	display: flex !important;
	flex-direction: row !important;
	/* Elementor containers carry `--flex-wrap-mobile: wrap`, which below its
	   mobile breakpoint broke each cell into three stacked rows — icon,
	   centred title, arrow. A row of three small parts has nothing to gain
	   from wrapping. */
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 14px !important;
	padding: clamp(18px, 1.9vw, 24px) clamp(16px, 1.7vw, 22px) !important;
	border: 0 !important;
	border-right: 1px solid var(--line) !important;
	border-bottom: 1px solid var(--line) !important;
	box-shadow: none !important;
	text-decoration: none;
	transition: background-color var(--dur) var(--ease);
}
.entry-content--index .hover-container:hover { background: var(--hover-surface); box-shadow: var(--el-hover) !important; position: relative; z-index: 1; }

/* The widgets inside carry Elementor's `--container-widget-width`, which
   resolves to zero in a row container — they need their own flex sizing. */
.entry-content--index .hover-container > .elementor-widget-icon { flex: none; width: auto !important; }
.entry-content--index .hover-container > .hover-text { flex: 1 1 auto; width: auto !important; }

/* The same solid info-circle, 24 times over, at 28px of near-black. It
   distinguishes nothing from anything, so it is sized down to a bullet and
   the ruled grid is left to do the work. Elementor sets both the colour and
   the fill per widget ID, which no selector here can outweigh. */
.entry-content--index .elementor-icon,
.entry-content--index .elementor-icon svg {
	color: var(--ink-4) !important;
	fill: currentColor !important;
	transition: color var(--dur) var(--ease);
}
.entry-content--index .elementor-icon svg { width: 15px; height: 15px; }
.entry-content--index .hover-container:hover .elementor-icon,
.entry-content--index .hover-container:hover .elementor-icon svg { color: var(--accent) !important; }

.entry-content--index .elementor-heading-title {
	margin: 0;
	text-align: left;
	font-family: var(--serif);
	font-size: clamp(16px, 1.35vw, 18px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.012em;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
	text-wrap: balance;
}
.entry-content--index .hover-container:hover .elementor-heading-title { color: var(--accent); }

/* Every one of the 24 opens bursamalaysia.com in a new tab, and nothing on
   the row said so. */
.entry-content--index .hover-container::after {
	content: "↗";
	flex: none;
	margin-left: auto;
	padding-left: 10px;
	font-size: 14px;
	line-height: 1;
	color: var(--ink-4);
	transition: color var(--dur) var(--ease);
}
.entry-content--index .hover-container:hover::after { color: var(--accent); }

/* =====================================================================
 * 27  LEGAL DOCUMENTS  (Terms of Service, Privacy Policy)
 *
 * Both pages arrive as a single Elementor text-editor widget in which every
 * section heading is a one-item ordered list:
 *
 *     <ol start="4"><li><strong> Legal Basis for Processing</strong></li></ol>
 *
 * So the documents contained no headings at all — twelve sections of 17px
 * prose parted by 17px bold list items — which is why they read as one
 * undifferentiated wall of grey. The list is what carries the section
 * number, so it is kept and styled as the heading it stands for: the number
 * in the same accent index label the home directory and Investor Relations
 * number with, the title in the serif, opened by a hairline.
 *
 * page.php detects that shape rather than the slug, so a third legal page
 * written the same way picks this up without another branch, and
 * catcha_legal_sections() in functions.php groups each heading and the nodes
 * under it into a <section class="clause">.
 *
 * It is a ruled ledger across the full shell — clause title on the left,
 * text on the right — the same shape as Careers and the home directory. It
 * was a 74ch card centred in a 1200px page first: that was a hedge against
 * "half the page empty", and it just moved the problem, since a narrow white
 * box floating in the middle of the ground reads as squeezed rather than as
 * a document. Two columns fill the page honestly, and the measure stays
 * readable because the text column is capped, not the sheet.
 * ================================================================== */
.entry-content--legal { max-width: none; }

/* The document's opening: dateline, then the paragraphs before clause 01. */
.legal-intro { max-width: 68ch; }
.legal-intro > p:first-child {
	margin-bottom: clamp(26px, 2.8vw, 36px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	font-family: var(--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--ink-3);
}
/* It arrives as bold italic, which at label size reads as emphasis on a
   line that is not emphatic. */
.legal-intro > p:first-child strong,
.legal-intro > p:first-child em,
.legal-intro > p:first-child i {
	font-weight: inherit;
	font-style: normal;
	color: inherit;
}
.legal-intro > p:not(:first-child) {
	font-size: var(--fs-lede);
	line-height: 1.6;
}

/* ── Clauses ──────────────────────────────────────────────────────── */
.clause {
	display: grid;
	gap: clamp(10px, 1.4vw, 18px);
	padding-block: clamp(28px, 3.2vw, 46px);
	border-top: 1px solid var(--line);
}
.clause:first-of-type { margin-top: clamp(30px, 3.4vw, 50px); }
@media (min-width: 900px) {
	.clause {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		gap: clamp(28px, 3.4vw, 64px);
		align-items: start;
	}
}
.clause__body { max-width: 68ch; }
.clause__body > *:first-child { margin-top: 0; }
.clause__body > p:last-child { margin-bottom: 0; }

/* Bullet lists sit inside a clause, not between them — they need air above
   and below or they crowd the paragraph that introduces them. */
.clause__body ul { margin-block: 1.1em 1.4em; }

/* ── Clause headings ──────────────────────────────────────────────────
 * `:has()` rather than a bare `ol`, so a genuine numbered list added to
 * either document later is still typeset as a list.
 *
 * The <li> keeps `display: list-item`: the automatic `list-item` counter is
 * incremented by list items and by nothing else, so laying the row out with
 * grid or flex here would silently reset every clause to 00. It is a
 * positioned marker instead, which also keeps a wrapped title indented past
 * the number rather than running back under it.
 * ------------------------------------------------------------------ */
.clause__head ol:has(> li:only-child > strong:only-child) {
	margin: 0;
	padding: 0;
	list-style: none;
}
.clause__head ol:has(> li:only-child > strong:only-child) > li {
	position: relative;
	margin: 0;
	padding-left: 34px;
}
/* `start` still drives the counter with the marker switched off, so the
   numbers stay the document's own — zero-padded to the house index style. */
.clause__head ol:has(> li:only-child > strong:only-child) > li::before {
	content: counter(list-item, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.5em;
	font-family: var(--label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1;
	color: var(--accent);
	font-variant-numeric: lining-nums tabular-nums;
}
.clause__head ol:has(> li:only-child > strong:only-child) > li > strong {
	display: block;
	font-family: var(--serif);
	font-size: clamp(19px, 1.7vw, 24px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.018em;
	color: var(--ink);
	text-wrap: balance;
}
@media (min-width: 900px) {
	.clause__head { position: sticky; top: 104px; }
}

/* =====================================================================
 * 28  SUBSCRIBE EMBED  (Enginemailer)
 *
 * The same form appears twice on the site: as the Investor Email Alert block
 * on Investor Relations, and as the whole of the CTA Form page.
 *
 * **The inputs cannot be styled from here and no amount of CSS will change
 * that.** The form is served from esvcs.enginemailer.com inside an iframe,
 * so its rounded fields and grey Subscribe button are theirs. Nor can it be
 * rebuilt natively against the same endpoints: submission runs through an
 * invisible reCAPTCHA whose site key is registered to *their* domain, then
 * posts JSON to `/processonlinesubscriber` same-origin. Replacing it means
 * an integration against Enginemailer's API with a key held server-side —
 * a functional change, not a visual one.
 *
 * What is fixable is everything around it, plus the frame's height, which is
 * hard-coded at 364px. That happens to be right at desktop — the form really
 * is 364px tall — but it is not right at every width, and it is not right
 * once the embed inserts its own error text under the button. The frame can
 * report its height and was never asked to; app.js now asks.
 *
 * Note on specificity: Elementor's frontend.min.css is enqueued *after* this
 * stylesheet, so anything it also sets wins a tie. Rules here that collide
 * with it are given a class more, or `!important` where it sets one too.
 * ================================================================== */
:root {
	/* How much larger than the embed builds it the form is rendered. The
	   form is 13px type in a layout capped at 680px; both are inside the
	   iframe and neither can be reached, so the frame is scaled as a whole.
	   Set to 1 to hand the embed back its own size.

	   Scaling the frame shrinks its *internal* width by the same factor, and
	   the embed's Position select overflows its own row once that gets
	   tight. That is their bug, but the scale magnifies it — so the scale
	   comes off at the widths where the form is already full-bleed and
	   gains nothing from it. */
	--em-zoom: 1;
}
@media (min-width: 700px)  { :root { --em-zoom: 1.15; } }
@media (min-width: 1000px) { :root { --em-zoom: 1.25; } }

.entry-content--form { max-width: none; }

/* The panel is centred; the heading stays on the page's left margin, where
   every other heading on the site sits. */
.entry-content--form .elementor-heading-title {
	margin: 0 0 clamp(20px, 2.4vw, 30px);
	text-align: left;
	font-family: var(--serif);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--ink);
}
.entry-content--form .e-con-inner { max-width: none !important; }
.entry-content--form .e-con,
.entry-content--form .e-con-inner { padding-inline: 0 !important; }

/* The panel is drawn on the widget's inner container, not on the widget:
   Elementor pins `.elementor-widget` to `max-width: 100%` from a four-class
   selector, and the inner container has no such rule to fight. */
.entry-content--form .elementor-widget-html > .elementor-widget-container {
	max-width: calc(680px * var(--em-zoom) + 2 * clamp(24px, 3vw, 40px) + 2px);
	margin-inline: auto;
	min-width: 0;
	padding: clamp(24px, 3vw, 40px);
	background: var(--surface);
	border: 1px solid var(--line-firm);
}

/* Shared with the Investor Relations block: the loader script injects a
   second copy of the frame, so the form arrives twice.
   No height here — the embed's own inline 364px stands until app.js hears
   back from it. Setting one would only fight the value it reports. */
.entry-content--form iframe,
.email-alert__form iframe {
	display: block;
	width: 100%;
	border: 0;
	/* The form is small because the embed builds it at 13px inside a layout
	   that caps itself at 680px, and neither is reachable from out here. The
	   frame is scaled instead. `zoom`, not `transform: scale()` — zoom
	   participates in layout, so the panel reflows to the scaled height and
	   the height app.js reports back still lands correctly; a transform
	   would leave the frame overflowing a box sized for the original.
	   `width: 100%` under zoom resolves in the frame's own coordinate space,
	   so the frame still fills the panel and only its contents grow. */
	zoom: var(--em-zoom);
}
.entry-content--form iframe ~ iframe,
.email-alert__form iframe ~ iframe { display: none; }