/* css/home.css - the home page's own styles.
   ---------------------------------------------------------------------
   Lifted out of the <style> block that used to sit in index.html's head,
   unchanged. It is linked in that same position - after the template's
   responsive.css and before mobile.css - so the cascade is identical to
   when it was inline.

   Only index.html links this file. Rules that should reach other pages
   belong in css/b2b.css; phone-only rules belong in css/mobile.css. */

/* Flat off-white hero. style.css hangs images/hero-22.jpg on
   .hero-22; the id + class here outranks it. */
#hero.hero-22 {
	background-image: none;
	background-color: #fcfcfb;
}

/* The top padding is desktop-only. Above 992px nothing clears the
   fixed bar, so the padding carries it: 82px of bar plus a 201px
   gap underneath. Below 992px the theme already gives
   .hero-section margin-top: 80px, which clears the bar on its own,
   and its own smaller padding is the breathing room - so leaving
   283px on here cleared the bar twice and left a hole on phones. */
@media (min-width: 992px) {
	#hero.hero-22 {
		padding-top: 283px;
	}

	/* Desktop hero background: the warm classical geometry. Phones and
	   tablets keep the flat off-white above, so they never download it;
	   the preload in index.html's head is scoped to this same width. The
	   colour stays as the fallback while the image loads. */
	#hero.hero-22 {
		background-image: url("/images/b2b/home/hero-background.webp?v=2026-10-06");
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
	}
}

/* ---- Split hero copy ----
   Serif headline on the left, short note + solid CTA on the
   right, both left-aligned inside the centred container. */
.hero-split {
	text-align: left;
}
.hero-pill {
	display: inline-block;
	margin-bottom: 14px;
	padding: 8px 18px;
	border-radius: 7px;
	background-color: transparent;
	border: 1px solid rgba(17, 17, 17, 0.25);
	font-family: var(--main-font);
	font-size: 0.9375rem;
	font-weight: 500;
	color: #16121c;
}
/* 95px headline, stepping down at the same breakpoints the
   template uses for the fs-58 ladder (scaled ~1.64x). */
.hero-split-title h1 {
	margin-bottom: 0;
	font-size: 5.9375rem;	/* 95px */
	line-height: 1.05;
	color: #000;
}
@media (max-width: 1399px) {
	.hero-split-title h1 { font-size: 5.75rem; }	/* 92px */
}
@media (max-width: 1199px) {
	.hero-split-title h1 { font-size: 5.3125rem; }	/* 85px */
}
@media (max-width: 991px) {
	.hero-split-title h1 { font-size: 4.3125rem; }	/* 69px */
}
@media (max-width: 767px) {
	.hero-split-title h1 { font-size: 4.0625rem; }	/* 65px */
}
@media (max-width: 575px) {
	.hero-split-title h1 { font-size: 3.6875rem; }	/* 59px */
}
.hero-split-side p {
	max-width: 30rem;
	font-size: 0.85rem;	/* was 1.0625rem, -20% */
	font-weight: 300;
	line-height: 1.55;
	color: #3a3742;
	margin-bottom: 28px;
}
/* Both hero buttons share the one style: near-black, flipping to
   the outline on hover. (The section-wide rule further down does
   the same for every other button; this block keeps the hero's
   own size and radius.) */
.hero-demo-btn {
	background-color: #111;
	border: 1px solid #111;
	border-radius: 4px;
	padding: 15px 28px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff !important;
}
.hero-demo-btn:hover,
.hero-demo-btn:focus {
	background-color: transparent;
	border-color: #111;
	color: #111 !important;
}
.hero-split-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---- Section buttons: black, outline on hover ----
   Every call to action inside a section is the same button: solid
   near-black (#111, the hero's shade - the theme's own btn--black is
   a slate #353f4f), flipping to its outline on hover. The theme's
   button classes carry !important, so this does too, and #page
   gives it the specificity to win. The header button is not a
   section and keeps its own white outline. */
#page section .btn {
	background-color: #111 !important;
	border-color: #111 !important;
	color: #fff !important;
}
#page section .btn:hover,
#page section .btn:focus {
	background-color: transparent !important;
	border-color: #111 !important;
	color: #111 !important;
}
/* The banner sits on a dark image: a black outline would vanish
   there, so its hover outline is white. */
#page #banner .btn:hover,
#page #banner .btn:focus {
	border-color: #fff !important;
	color: #fff !important;
}
@media (max-width: 991px) {
	.hero-split-side {
		margin-top: 30px;
	}
}

/* ---- Hero platform tabs ----
   White card under the hero copy: a 4-tab bar on top, one
   dashboard screenshot per tab underneath. */
/* Break the card out of the 1320px container: stretch it towards
   the viewport edges with an 80px gutter each side. */
@media (min-width: 992px) {
	.hero-tabs {
		margin-left: calc(50% - 50vw + 80px);
		margin-right: calc(50% - 50vw + 80px);
	}
}
.hero-tabs {
	margin-top: 108px;
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 24px 50px rgba(18, 0, 54, 0.12);
	text-align: left;
}
.hero-tabs-nav {
	display: flex;
}
.hero-tab-link {
	flex: 1 1 0;
	padding: 18px 12px;
	background-color: #fff;
	border: none;
	border-bottom: 1px solid #e7e8ee;
	border-right: 1px solid #e7e8ee;
	font-family: var(--main-font);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	color: #50565b;
	text-align: center;
	cursor: pointer;
	transition: color 250ms ease, border-color 250ms ease;
}
.hero-tab-link:last-child {
	border-right: none;
}
.hero-tab-link:hover {
	/* full black on hover; the active tab keeps its white label below */
	color: #111;
}
.hero-tab-link.active {
	background-color: #000;
	border-bottom-color: #000;
	color: #fff;
	font-weight: 700;
}
.hero-tab-link.active:hover {
	color: #fff;
}
/* The panes stack in one grid cell over a constant black ground,
   so switching tabs crossfades the screenshots without the
   background ever flashing. All images stay rendered (hidden by
   opacity, not display), so they are already loaded on switch. */
.hero-tab-panes {
	display: grid;
	background-color: #000;
}
.hero-tab-pane {
	grid-area: 1 / 1;
	padding: 40px 44px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 300ms ease, visibility 300ms ease;
}
.hero-tab-pane.active {
	opacity: 1;
	visibility: visible;
}
/* The rule under that line, closing the hero on a phone. Phone-only
   like the image and the line above it. */
.hero-mobile-divider {
	display: none;
}

/* The line under the phone screenshot - phone-only, like the
   image it belongs to. */
.hero-mobile-note {
	display: none;
}

/* The phone screenshot that replaces the tab card. Hidden at every
   width here; css/mobile.css switches it on below 768px. */
.hero-mobile-shot {
	display: none;
}

.hero-tab-pane img {
	display: block;
	margin: 0 auto;
	border-radius: 8px;
}

/* Phones: 2 x 2 tab grid, tighter panel padding */
@media (max-width: 767px) {
	.hero-tabs-nav {
		flex-wrap: wrap;
	}
	.hero-tab-link {
		flex: 1 1 50%;
		font-size: 0.66rem;
		padding: 14px 8px 12px;
	}
	.hero-tab-link:nth-child(2n) {
		border-right: none;
	}
	.hero-tab-pane {
		padding: 18px;
	}
}

/* Sit the logo on the header's own gutter (template default is
   margin-left: 12px). The nav gets its room from the wider bar
   below, so the logo no longer has to be pulled off-grid. */
#header .desktoplogo {
	margin-left: 0;
}

/* Trimmed logo: cap height so the nav stays on one row.
   Beats .desktoplogo .logo-black img { max-height: 85px } */
#header .desktoplogo .logo-white img,
#header .desktoplogo .logo-black img {
	max-height: 42px;
	width: auto;
}

@media (min-width: 992px) {
	/* The logo (224px) plus the nav (930px) need 1154px, but the
	   template caps the header bar at 1140px - so the nav wrapped
	   onto a second row under the logo. Widen the bar to the page's
	   container width and tighten the item spacing, so the nav sits
	   on one row to the right of the logo. */
	#header .wsmainwp {
		max-width: 1320px;
	}
	#header .wsmenu > .wsmenu-list > li > a.h-link {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* The template floats the whole nav right, which dumps every
	   spare pixel into one gap between the logo and the first item.
	   Lay the bar out instead: logo, then the menu next to it, with
	   Log in + the CTA pushed to the right edge. */
	#header .wsmainwp {
		display: flex;
		align-items: center;
	}
	#header .desktoplogo {
		float: none;
		flex: 0 0 auto;
	}
	#header nav.wsmenu {
		float: none;
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 100px;
	}
	#header .wsmenu > .wsmenu-list {
		display: flex;
		align-items: center;
		float: none;
		width: 100%;
	}
	#header .wsmenu > .wsmenu-list > li {
		float: none;
		flex: 0 0 auto;
	}
	/* Everything from "Log in" onwards sits hard right */
	#header .wsmenu > .wsmenu-list > li.reg-fst-link {
		margin-left: auto;
	}
}

/* Small laptops: the bar is viewport-bound here, so trim the logo
   and the item spacing further to hold the single row all the way
   down to the 992px drawer breakpoint. */
@media (min-width: 992px) and (max-width: 1199px) {
	#header .desktoplogo .logo-white img,
	#header .desktoplogo .logo-black img {
		max-height: 34px;
	}
	#header .wsmenu > .wsmenu-list > li > a.h-link {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 0.9375rem;
	}
}

@media (min-width: 992px) {

	/* The template drops every panel 62px from the nav wrapper, which
	   assumes a 62px-tall bar. This page's header is taller than that,
	   so the panels landed on top of the nav row. Anchor the small
	   dropdowns to their own nav item instead. */
	#header .wsmenu > .wsmenu-list > li.has-dropdown {
		position: relative;
	}
	#header .wsmenu > .wsmenu-list > li.has-dropdown > ul.sub-menu {
		top: 100%;
	}

	/* The template pins dropdowns to a 200px box, which wrapped the
	   longer labels ("Compliance updates"). Size them to their
	   content instead and keep every item on one line. */
	#header .wsmenu > .wsmenu-list > li.has-dropdown > ul.sub-menu {
		width: max-content;
		max-width: none;
	}
	#header .wsmenu > .wsmenu-list > li.has-dropdown > ul.sub-menu > li > a {
		white-space: nowrap;
	}

	/* Full-viewport Platform panel, dropping from the bottom of the
	   bar. Taking the positioning context off the nav item and the
	   1320px wrapper lets it span edge to edge. */
	#header .wsmainfull { position: relative; }
	#header .wsmainwp { position: static; }
	#header .wsmenu > .wsmenu-list > li.mg_link { position: static; }

	#header .wsmenu > .wsmenu-list > li.mg_link > .wsmegamenu.mm-platform {
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		padding: 34px 0 38px;
		border: none;
		border-radius: 0;
		background-color: var(--white);
		box-shadow: 0 18px 40px rgba(18, 0, 54, 0.10);
	}
	/* The panel hangs off the bar, not off the nav item, so the bar's
	   padding left a dead strip between "Platform" and the panel.
	   Crossing it dropped li:hover and shut the menu. This invisible
	   bridge belongs to the panel, so the hover survives the trip
	   down. It is only live while the panel is open, since a hidden
	   parent takes its children with it. */
	#header .wsmenu > .wsmenu-list > li.mg_link > .wsmegamenu.mm-platform::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}

	/* Hold the panel's columns on the same grid as the page */
	#header .wsmegamenu.mm-platform > .container-fluid {
		max-width: 1320px;
		margin: 0 auto;
		padding: 0 15px;
	}

	#header .wsmegamenu.mm-platform h6.title {
		margin: 0 0 18px 14px;
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--gray);
	}
	#header .wsmegamenu.mm-platform ul.link-list > li > a {
		line-height: 1.35;
		padding: 12px 14px;
	}
	#header .wsmegamenu.mm-platform ul.link-list > li > a:hover {
		padding: 12px 14px;
	}
}

/* Descriptor line under each module name */
#header .wsmegamenu .mm-desc {
	display: block;
	margin-top: 3px;
	font-family: var(--base-font);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--gray);
}

/* The accordion is tight on mobile - names only */
@media (max-width: 991px) {
	#header .wsmegamenu .mm-desc { display: none; }
}

/* Bottom strip of the mega-menu */
#header .wsmegamenu .mm-foot {
	margin: 14px 13px 0;
	padding-top: 12px;
	border-top: 1px solid var(--tra-gray);
}
#header .wsmegamenu .mm-foot a {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
}

/* ---- Logos +20% ----
   Scoped to this page so the /individual/ pages keep the
   template's original sizing. Each value is the size that
   applied before, multiplied by 1.2 and rounded. */

/* Header, desktop: was 42px (set above) */
#header .desktoplogo .logo-white img,
#header .desktoplogo .logo-black img {
	max-height: 50px;
}

/* Small laptops: was 34px. This has to be restated after the rule
   above, because that one is unconditional and would otherwise win
   on source order inside the media query - which is what let the
   bar overflow between 992px and the container width. */
@media (min-width: 992px) and (max-width: 1199px) {
	#header .desktoplogo .logo-white img,
	#header .desktoplogo .logo-black img {
		max-height: 41px;
	}
	#header nav.wsmenu {
		margin-left: 40px;
	}
}
/* Tightest tier, just above the 992px drawer breakpoint: the CTA
   was still running past the gutter here. */
@media (min-width: 992px) and (max-width: 1099px) {
	#header .desktoplogo .logo-white img,
	#header .desktoplogo .logo-black img {
		max-height: 36px;
	}
	#header nav.wsmenu {
		margin-left: 18px;
	}
}

/* Header, mobile burger bar: was 45px */
.wsmobileheader .smllogo img {
	max-height: 54px;
}

/* ---- Black header bar, white logo ----
   Overrides the white-menu treatment: the bar is solid black in
   both states, with the white logo and white links. Dropdown and
   mega-menu panels stay white. */
#header.white-menu .wsmainfull,
#header.white-menu .wsmainfull.scroll {
	background-color: #0e0e0e !important;	/* matte black */
	box-shadow: none;
}
/* Desktop nav only. The bar is black above 992px, which is why the
   links are white and the panels are matte black. Below that the
   menu becomes a white slide-in drawer, where white links are
   invisible and a black panel looks wrong - so none of this may
   leak past the breakpoint. */
@media (min-width: 992px) {

	#header.navbar-dark .desktoplogo .logo-black { display: none; }
	#header.navbar-dark .desktoplogo .logo-white { display: block; }
	#header.navbar-dark .wsmenu > .wsmenu-list > li > a.h-link {
		color: var(--white);
	}
	#header.navbar-dark .wsmenu-list > li > a.h-link:hover {
		color: rgba(255, 255, 255, 0.72);
	}
	#header .btn--tra-white {
		color: var(--white) !important;
		border-color: rgba(255, 255, 255, 0.55) !important;
	}

	/* The bar is matte black in both states, so the CTA inverts on hover:
	   white outline -> solid white with dark text. Set here rather than
	   with a theme hover-- class, which would repaint it a brand colour. */
	#header .btn--tra-white:hover,
	#header .btn--tra-white:focus {
		color: #111 !important;
		background-color: var(--white) !important;
		border-color: var(--white) !important;
	}

	/* Matte black dropdown panels: white links on the same near-black
	   as the bar, flat hover states, no glossy shadows. */
	#header .wsmenu > .wsmenu-list > li.has-dropdown > ul.sub-menu {
		background-color: #0e0e0e;
		border: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: none;
	}
	#header .wsmenu > .wsmenu-list > li.has-dropdown > ul.sub-menu > li > a {
		background-color: transparent;
		color: rgba(255, 255, 255, 0.85);
	}
	#header .wsmenu > .wsmenu-list > li.has-dropdown > ul.sub-menu > li > a:hover {
		background-color: #1c1c1c;
		color: #fff;
	}

	/* Matte black Platform mega-menu */
	#header .wsmenu > .wsmenu-list > li.mg_link > .wsmegamenu.mm-platform {
		background-color: #0e0e0e;
		box-shadow: none;
	}
	#header .wsmegamenu.mm-platform h6.title {
		color: rgba(255, 255, 255, 0.45);
	}
	#header .wsmegamenu.mm-platform ul.link-list > li > a {
		background-color: transparent;
		color: #fff;
	}
	#header .wsmegamenu.mm-platform ul.link-list > li > a:hover {
		background-color: #1c1c1c;
	}
	#header .wsmegamenu.mm-platform .mm-desc {
		color: rgba(255, 255, 255, 0.6);
	}
	#header .wsmegamenu.mm-platform .mm-foot {
		border-top-color: rgba(255, 255, 255, 0.14);
	}
	#header .wsmegamenu.mm-platform .mm-foot a {
		color: #fff;
	}

}

/* Mobile bar: black with the white logo and a white burger */
.wsmobileheader {
	background-color: #0e0e0e !important;
	box-shadow: none;
}
.wsanimated-arrow span,
.wsanimated-arrow span:before,
.wsanimated-arrow span:after {
	background: var(--white);
}
.wsactive .wsanimated-arrow span {
	background: transparent;
}

/* Section dividers.
   The template ships hr.divider with margin:0, so the rule sits
   flush against whatever ends above it - flush against the photo
   on the pt-100 sections, which have no bottom padding. This gives
   it breathing room. Scoped to this page rather than changed in
   style.css, because hr.divider is also used by the blog posts and
   every /individual/ page. */
hr.divider {
	margin-top: 100px;
}

/* The section after a divider ships with pt-100, so the line sat
   30px below the block above it but 100px above the block below.
   Match the two so the rule is centred between the sections. The
   banner is excluded - it has its own overlay padding. */
hr.divider + section.content-section {
	padding-top: 100px;
}

/* The banner carries its padding on the inner overlay, not on the
   section, and ships as pt-90 - 10px short of every other divider. */
hr.divider + section.banner-section .banner-overlay {
	padding-top: 100px;
}

/* Footer route to the B2C site */
.foo-individuals a { color: var(--gray); }
.foo-individuals a:hover { color: #111; }

/* Footer: was 66px, stepping down to 60/56/50 on smaller screens.
   #page beats the template's class-only media rules. */
#page .footer-logo { max-height: 79px; }
@media (max-width: 1199.98px) { #page .footer-logo { max-height: 72px; } }
@media (max-width: 991.98px)  { #page .footer-logo { max-height: 67px; } }
@media (max-width: 320.98px)  { #page .footer-logo { max-height: 60px; } }

/* ---- Inline SVG feature icons ----
   .ico-55 only sizes the flaticon glyph pseudo-elements, so an
   <svg> gets nothing from it. Match the 3.75rem the features
   section renders those glyphs at; stroke="currentColor" on the
   svg then picks up .color--purple from the wrapper. */
.features-section .ico-55 svg {
	width: 3.75rem;
	height: 3.75rem;
	display: block;
}
		
/* ---- Launch offer (50% off, launch month) ---- */
.price .old-price {
	display: inline-block;
	margin-right: 6px;
	font-family: var(--main-font);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--gray);
	text-decoration: line-through;
}
.launch-pill {
	display: inline-block;
	margin-top: 18px;
	padding: 8px 20px;
	border-radius: 36px;
	background-color: var(--black);
	color: var(--white);
	font-family: var(--main-font);
	font-size: 0.9375rem;
	font-weight: 700;
}


/* ---- Platform feature copy, two lengths ----
   Each feature carries a long description and a short one. From 768px up
   the short one shows, because five columns leave no room for the long
   version; below that the phone gets the long one, where there is a full
   screen width per item. Ask Louis is phone-only for the same reason -
   the desktop grid runs the four lifecycle stages and Louis has his own
   section further down the page. */
.fbox-desc--long {
	display: none;
}

@media (min-width: 768px) {
	.fbox-col--phone-only {
		display: none;
	}
}


/* ---- Drawer call to action ----
   The two hero buttons appear only in the mobile drawer; the bar on a
   wide screen keeps its single "Analyse a contract" button. Hidden here
   at every width, switched on below 992px in css/mobile.css. */
#header .wsmenu > .wsmenu-list > li.nav-drawer-head,
#header .wsmenu > .wsmenu-list > li.nav-drawer-foot {
	display: none;
}

/* ===============================================================
   PRICING: TWO ONE-OFF PLANS AND BUSINESS  (2026-10-04)
   The same markup and rules as pricing.html, so both pages show the same plans.
   Contract Analysis and Contract Creation stack as wide rows on the
   left; Business keeps the full card on the right.
   =============================================================== */

/* ---------------------------------------------------------------
   Asymmetric pricing layout. Preview and Starter stack as wide
   rows down the left; Business keeps the full card on the right,
   so the plan we want chosen is the only one showing its features.
   ------------------------------------------------------------- */
/* Every card in this section wears the same mat. The 10px ring
   sits outside each card's own box, so the column gutter has to
   carry two of them plus the gap you actually want to see. */
.pricing-split .pricing-1-table {
	/* The mat is the card's only edge. Any border here would sit
	   inside it and read as a second ring. */
	border: 0;
	box-shadow:
		0 0 0 10px #eeeef1,
		0 10px 24px rgba(20, 20, 43, 0.07);
}
.pricing-split > .row {
	--bs-gutter-x: 46px;
}

@media (min-width: 992px) {
	/* Both columns run to the same height, so the two stacked
	   rows finish level with the Business card. */
	.pricing-split > .row {
		align-items: stretch;
	}
	.pricing-stack {
		display: flex;
		flex-direction: column;
		/* 26px of visible gap plus the two 10px mats that sit
		   inside it */
		gap: 46px;
	}
	.pricing-stack .pricing-row {
		flex: 1 1 0;
	}
}

/* A row card, built to the reference: the plan name sits on the
   baseline of the left half, the price block is centred in the right
   half over a compact pill, and an inset hairline divides them. The
   template centres pricing cards, which reads as a loose column once
   the card is this wide. */
/* Scoped to .pricing-split so it outweighs the shared card rule
   above, which sets both the mat and a drop shadow. */
.pricing-split .pricing-row {
	/* Mat only - the two row cards sit flat, with the drop
	   shadow left to the Business card. */
	box-shadow: 0 0 0 10px #eeeef1;
}
.pricing-row {
	display: flex;
	align-items: stretch;
	text-align: left;
	padding: 40px 44px;
}

/* Left half: name block sits low, as in the reference */
.pricing-row .pr-main {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 40px;
}
/* Eyebrow above the plan name. Reuses the template's
   .module-subtitle (600 / uppercase / 0.75px tracking) and only
   sets the house eyebrow grey and a gap sized for a card. */
.pricing-row .pr-main .module-subtitle {
	margin-bottom: 9px;
	color: #6c757d;
}
.pricing-row .pr-main h6 {
	margin-bottom: 10px;
}
/* Card description. Matches the fine print under the price -
   14px / 400 - so the two halves of the card read as one scale.
   Beats the .fs-15 on the element (0,2,1 vs 0,1,0). */
.pricing-row .pr-main p {
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--gray);
}
/* Only the gaps between paragraphs are spaced - the last one
   keeps sitting on the card's baseline. */
.pricing-row .pr-main p:last-child {
	margin-bottom: 0;
}

/* Right half: price, supporting line, pill - vertically centred */
.pricing-row .pr-side {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 0 0 43%;
	padding-left: 40px;
	text-align: center;
}
/* The divider stops short of the card's padding, so it reads as a
   rule between the halves rather than a second card edge. */
.pricing-row .pr-side:before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background-color: #e4e4e4;
}
.pricing-row .pr-side .price {
	margin-bottom: 14px;
	white-space: nowrap;
}
/* The row cards carry a smaller price than Business, so the
   headline plan still reads as the largest number on the page -
   and so "/ month" stays on the same line as the figure. */
.pricing-row .pr-side .price span {
	font-size: 2.75rem;
}
.pricing-row .pr-side .price sup {
	font-size: 1.9rem;
	top: -4px;
}
.pricing-row .pr-side .price sup.validity {
	font-size: 1.15rem;
}
.pricing-row .pr-side .price .old-price {
	font-size: 1.2rem;
	margin-right: 5px;
}
.pricing-row .pr-side .pr-note {
	margin-bottom: 22px;
	color: var(--gray);
}
/* Fine print under the price. Fixed at 14px rather than rem so
   it does not shrink further on the smaller root sizes below
   1200px. If this is ever taken lighter than 300, add that
   weight to the font request first - an unloaded weight falls
   back to 400 and renders heavier, not lighter. */
.pricing-row .pr-side .pr-fine {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}
/* A pill sized to its label, not the column - the template's
   .pt-btn is a full-width block. The min-width fits the longest
   label, "Analyse a contract", so both row buttons match. */
.pricing-row .pr-side .pt-btn {
	display: inline-block;
	width: auto;
	min-width: 12.5em;
	margin-top: 0;
	padding: 9px 26px 11px;
	line-height: 28px;
}

/* Below the desktop breakpoint the row would squeeze the price
   against the blurb, so stack the two halves and move the rule
   above the price. */
@media (max-width: 991.98px) {
	.pricing-stack {
		margin-bottom: 46px;
	}
	.pricing-stack .pricing-row {
		margin-bottom: 46px;
	}
	.pricing-stack .pricing-row:last-child {
		margin-bottom: 0;
	}
	.pricing-row {
		display: block;
		padding: 32px 30px;
	}
	.pricing-row .pr-main {
		padding-right: 0;
	}
	.pricing-row .pr-side {
		padding-left: 0;
		padding-top: 26px;
		margin-top: 26px;
		border-top: 1px solid #e4e4e4;
		text-align: left;
		align-items: flex-start;
	}
	/* The divider runs between the halves only while they sit
	   side by side; stacked, the border-top above replaces it. */
	.pricing-row .pr-side:before {
		display: none;
	}
}

/* Black, not the template's navy, slate and grey: text, prices and
   icons on the plan cards are #111. */
#pricing h1, #pricing h2, #pricing h3, #pricing h4, #pricing h5, #pricing h6,
#pricing p, #pricing li, #pricing .price span, #pricing .price sup,
#pricing .color--header, #pricing .color--gray, #pricing .color--black,
#pricing .pr-fine, #pricing .pr-note, #pricing [class^="flaticon-check"] {
	color: #111;
}
#pricing .highlight-badge {
	background-color: #111;
}
#pricing .highlight-badge, #pricing .highlight-badge * {
	color: #fff;
}

/* The two one-off plans take the outline and fill on hover, so Business
   keeps the only solid button in the row. Every other section button
   is solid #111 from the "#page section .btn" rule near the top of this
   file; these carry !important to beat it, as it does the template. */
#page #pricing .pricing-row .btn {
	background-color: transparent !important;
	color: #111 !important;
}
#page #pricing .pricing-row .btn:hover,
#page #pricing .pricing-row .btn:focus {
	background-color: #111 !important;
	color: #fff !important;
}