@charset "utf-8";
/* Styles for dashboard.html */
.invite-code {
	color: #572e8b; 
	text-decoration: underline; 
	cursor: pointer
}

.invite-code:hover {
	color: #2E8B57; 
	text-decoration: none; 
	cursor: pointer
}

.nav-toggler {
	cursor: pointer;
}

.checkout-head {
	background-color: #edeff2; 
}

@media (max-width: 768px) {
	.checkout-head {
		height: 8rem;
	}
	.checkout-head-icons {
		padding-top: 4.8rem
	}
}

@media (min-width: 768px) {
	.checkout-head {
		height: 10rem;
	}
	.checkout-head-icons {
		padding-top: 6rem
	}
}

.sidebar {
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100; /* Behind the navbar */
	padding: 20px 0 0; /* Height of navbar */
	box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
	position: relative;
	top: 0;
	height: calc(80vh - 20px);
	padding-top: .5rem;
	overflow-x: hidden;
	overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
	font-weight: 500;
	color: #67747C;
}

.sidebar .nav-link.active {
	background-color: #e9ecef;
	border-right: 2px solid #572e8b;
}

.sidebar .nav-link:hover {
	background-color: #e9ecef;
	border-right: 2px solid #2E8B57;
}

.sidebar-heading {
	font-size: .75rem;
	text-transform: uppercase;
	line-height: 20px;
}

.nav-item-2 {
	font-weight: 500;
	color: #67747C;
}

.nav-item-2:hover {
	background-color: #e9ecef;
	color: #67747C;
}

.menu-item {
	margin: 0 0 5px 0;
}

/* Service / use-case prose lists: replace the raw disc bullet with a brand
   tick (resolve-ui-batch, concern 6). Scoped to <ul> so the quote-process
   <ol> on sub-service pages keeps its numbers. */
ul:has(> li.menu-item) {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}
ul > li.menu-item {
	position: relative;
	padding-left: 1.85rem;
}
ul > li.menu-item::before {
	content: "\f00c"; /* Font Awesome check */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 0.12em;
	font-size: 0.85em;
	color: var(--color-primary);
}

/* Core service page: the before/after sample sits in a right-hand column
   beside the prose (resolve-ui-batch, concern 5). Sticky on wide viewports so
   it stays in view while the prose scrolls; the placeholder variant (critique)
   uses the same column. */
.bpr-sample-col { margin-top: var(--sp-4); }
@media (min-width: 992px) {
	.bpr-sample-col { margin-top: 0; position: sticky; top: 96px; }
}

.circle {
	border-radius: 50%; 
	font-size: 13px;
	color: #4d535b;
	text-align: center;
	background: #f8f9fa;
	display: table-cell;
	position: absolute;
	box-shadow: 0px 0px 0px 8px #248738;
}

.text {
	position: relative;
}

.text2 {
	position: relative;
}

@media (min-width: 768px) and (max-width: 992px) {
	.circle {
		width: 8rem;
		height: 8rem;
		font-size: 12px;
		top: 3rem;
		right: 16rem;		
		line-height: 6rem;
		font-weight: 600;
	}

	.text {
		top: -75px;
		font-weight: 600;
	}

	.text2 {
		top: -147px;
		font-size: 16px;
		font-weight: 600;
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	.circle {
		width: 10rem;
		height: 10rem;
		font-size: 15px;
		top: 3rem;
		right: 22rem;
		line-height: 7rem;
		font-weight: 600;
	}

	.text {
		top: -80px;
		font-weight: 600;
	}

	.text2 {
		top: -160px;
		font-size: 18px;
		font-weight: 600;
	}
}

@media (min-width: 1200px) {
	.circle {
		width: 10rem;
		height: 10rem;
		font-size: 15px;
		top: 4rem;
		right: 25rem;
		line-height: 7rem;
		font-weight: 600;
	}

	.text {
		top: -80px;
		font-weight: 600;
	}

	.text2 {
		top: -160px;
		font-size: 18px;
		font-weight: 600;
	}
}


/* CSS for Blog */

.blog-text {
	font-size: 14px; 
	font-family: var(--font-body);
}

.bo-or {
	font-weight: bold;
	color: #FF4500;
}

.bo-bl {
	font-weight: bold;
	color: #0066FF;
	
}

a.related-articles {
	text-decoration: none;
	color: #000000;
}

/* CSS for whole website */
/* Social platform-button colour overrides (.fb-btn / .youtube-btn /
   .twitter-btn / .instagram-btn) were removed when the social page moved to the
   .svc-card / .social-card treatment (D4, 2026-05-31) — they had no other
   callers. The platform accent now lives on .social-card__icon--* instead. */
.btn-success.essay-review-btn {
	background-color: #3E3E3E;
	border-color: #3E3E3E;
}

.btn-primary.google-btn {
	background-color: #4285F4;
	border-color: #4285F4;
}

.btn-primary.google-btn:hover {
	background-color: #0275d8;
	border-color: #0275d8;
}

body,
p {
	font-family: var(--font-sans);
}

strong {
	font-family: var(--font-sans);
	font-weight: 600;
	color: #2E8B57;
	font-size: 12pt;
}

a.connecting-text {
	font-family: var(--font-sans);
	font-weight: 600;
	color: #572e8b;
	font-size: 12pt;
	text-decoration: underline;	
}

a.connecting-text:hover {
	font-family: var(--font-sans);
	font-weight: 600;
	color: #2E8B57;
	font-size: 12pt;	
	text-decoration: none;
}

a.form-link {
	font-family: var(--font-sans);
	font-weight: 500;
	color: #572e8b;
	font-size: 10pt;
	text-decoration: underline;
}

a.form-link:hover {
	font-family: var(--font-sans);
	font-weight: 500;
	color: #2E8B57;
	font-size: 10pt;	
	text-decoration: none;
}

a.form-grey-link {
	font-family: var(--font-sans);
	font-weight: 500;
	color: white;
	font-size: 10pt;
	text-decoration: underline;
}

a.form-grey-link:hover {
	font-family: var(--font-sans);
	font-weight: 500;
	color: white;
	font-size: 10pt;	
	text-decoration: none;
}

a.title-connecting-text {
	font-family: var(--font-sans);
	font-weight: 1000;
	color: #572e8b;
	font-size: 14pt;
	letter-spacing: 0.05em;	
}

a.title-connecting-text:hover {
	color: #2E8B57;
	text-decoration: none;
}

li.privacy {
	margin: 0 0 10px 0;
}

/* Navbar */
.nav-main-text {
	font-family: var(--font-sans);
	font-weight: 600;
}

/* Footer styles live in design-tokens.css (.bpr-footer — Scribendi-style mega
   footer). The legacy .proofreading-footer / .footer-text-* rules were retired
   with the footer redesign (resolve-ui-batch). */


/* CSS for other pages */
.section-masthead {
	background: linear-gradient(#eeedef, #ffffff);
	padding-top: 100px;
	height: 300px;
}

/* CSS for login page */
.login-page-padding {
	padding-top: 5rem;
}

.login-pane {
	border-style: solid;
	width: 300px;
	padding: 10px;
	border-color: #eeedef;
	min-width: 350px;
	margin-bottom: 40px;
}


/* CSS for index.html */
@media (max-width: 991px) {
	.nav-button-right {
		padding-top: 5px;
	}
}

header.masthead {
	background: linear-gradient(#eeedef, #ffffff);
}

@media (max-width: 767.5px) {
	header.masthead {
		padding-top: 90px;
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	header.masthead {
		height: 385px;
		padding-top: 90px;
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	header.masthead {
		height: 400px;
		padding-top: 90px;
	}
}

@media (min-width: 1200px) {
	header.masthead {
		height: 430px;
		padding-top: 90px;
	}
}

.section-title {
	font-family: var(--font-sans);
	font-weight: 700;
	color: #4d535b;
	font-size: 14pt;
	letter-spacing: 0.05em;	
}

.section-subtitle {
	font-family: var(--font-sans);
	font-weight: 500;
	color: #4d535b;
	font-size: 10pt;
	letter-spacing: 0.05em;		
}

.section-subtitle:hover {
	font-family: var(--font-sans);
	font-weight: 500;
	color: #2E8B57;
	font-size: 10pt;
	letter-spacing: 0.05em;	
	text-decoration: none;	
}

.review-response {
	font-family: var(--font-sans);
	font-weight: 500;
	color: #4d535b;
	font-size: 10pt;
	letter-spacing: 0.05em;		
}

.section-two {
	background: #1F5236;
}

.section-three {
  padding-top: 2rem;
  padding-bottom: 1rem;
  background: linear-gradient(#ffffff, #eeedef, #ffffff)
}

h5.service-card {
	letter-spacing: 0.03em;		
}

.service-pane {
	border-width: 2.5px;
	border-radius: 15px;
	border-style: solid;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.section-five {
	padding-top: 1rem;
	padding-bottom: 2rem;
}

@media (max-width: 767.5px) { 
	.images-section-five {
		margin-left: auto;
		margin-right: auto;
		display: block;	
		padding-bottom: 1rem;
		padding-top: 1rem;
		width: 50px;
	}
}

.section-seven {
	background: #505a63;
  	padding-top: 3rem;
  	padding-bottom: 2rem;
}

/* Feature card grid (about page + reusable). Uniform bordered cards instead of
   bare floating .prose columns. Auto-fits 1–3 across by viewport. */
.bpr-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--sp-4, 1rem);
	margin-top: var(--sp-6, 2rem);
}
.bpr-feature {
	background: var(--card-surface, #fff);   /* panel on paper, white on wash (run-2) */
	border: 1px solid var(--brand-paper-200);
	border-radius: var(--radius-lg);
	padding: var(--sp-5, 1.5rem);
}
/* When the "Who this is for" audience cards render inside the count-adaptive
   carousel, stretch each card to fill its slide so a row of cards with
   uneven copy lengths shares one bottom edge. */
.svc-carousel__slide > .bpr-feature {
	height: 100%;
}
.bpr-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--brand-green-100);
	color: var(--brand-green-700);
	font-size: 1.0625rem;
	margin-bottom: var(--sp-3, 0.75rem);
}
.bpr-feature__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--brand-ink-900);
	margin: 0 0 var(--sp-2, 0.5rem);
}
.bpr-feature__body {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--brand-charcoal-700);
	margin: 0;
}

/* ---- Elite use-case IA: steps, FAQ ---------------------------------------- */
/* How-it-works — numbered step list (shares the join-team pipeline look). */
.bpr-steps {
	list-style: none;
	padding: 0;
	margin: var(--sp-6, 2rem) auto 0;
	max-width: 820px;
	display: grid;
	gap: var(--sp-5, 1.5rem);
}
.bpr-steps__item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.bpr-steps__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--brand-green-700);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 700;
}
.bpr-steps__title {
	display: block;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	color: var(--brand-ink-900);
	margin-bottom: 0.2rem;
}
.bpr-steps__text {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--brand-charcoal-700);
	margin: 0;
}

/* ---- Screenshot stepper (.bpr-stepflow) ----------------------------------
   Elite alternating-row "How it works" (orderable flow only). Numbered forest
   badge + Lora title/Inter body on one side; a framed screenshot / on-brand
   mockup on the other, sides swapping each row. The quote flow keeps .bpr-steps.
   -------------------------------------------------------------------------- */
.bpr-stepflow {
	list-style: none;
	padding: 0;
	margin: var(--sp-7, 3rem) auto 0;
	max-width: 980px;
	display: grid;
	gap: var(--sp-7, 3rem);
}
.bpr-stepflow__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--sp-6, 2rem);
}
.bpr-stepflow__row--reverse .bpr-stepflow__text   { order: 2; }
.bpr-stepflow__row--reverse .bpr-stepflow__visual { order: 1; }
.bpr-stepflow__text {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4, 1rem);
}
.bpr-stepflow__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: var(--brand-green-700);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.0625rem;
	box-shadow: var(--shadow-1);
}
.bpr-stepflow__title {
	display: block;
	font-family: var(--font-display);
	font-size: 1.375rem;
	line-height: 1.2;
	color: var(--brand-ink-900);
	margin-bottom: 0.4rem;
}
.bpr-stepflow__body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--brand-charcoal-700);
	margin: 0;
	max-width: 34ch;
}
.bpr-stepflow__visual {
	display: flex;
	justify-content: center;
}
/* Real screenshots (Stage 3) get the same framed treatment as the mock cards. */
.bpr-stepflow__img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-3);
	border: 1px solid var(--brand-paper-200);
}

/* ---- On-brand step mockups (.bpr-mock) ------------------------------------ */
.bpr-mock {
	width: 100%;
	max-width: 380px;
	background: #fff;
	border: 1px solid var(--brand-paper-200);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-3);
	overflow: hidden;
	font-family: var(--font-body);
	color: var(--brand-ink-900);
}
.bpr-mock__chrome {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.75rem 1rem;
	background: var(--brand-paper-50);
	border-bottom: 1px solid var(--brand-paper-200);
}
.bpr-mock__dot {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 999px;
	background: var(--brand-paper-200);
}
.bpr-mock__pad { padding: 1.25rem; }

/* Shared file row / caption (delivery card) */
.bpr-mock__file-name { font-weight: 600; font-size: 0.9375rem; }
.bpr-mock__early { color: var(--brand-charcoal-500); font-size: 0.8125rem; }

/* Match card */
.bpr-mock--match { padding: 1.25rem; }
.bpr-mock__editor { display: flex; align-items: center; gap: 0.75rem; }
.bpr-mock__avatar {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--brand-green-700);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.bpr-mock__editor-meta { flex: 1 1 auto; display: flex; flex-direction: column; }
.bpr-mock__editor-meta strong { font-size: 0.9375rem; }
.bpr-mock__editor-meta small { color: var(--brand-charcoal-500); font-size: 0.8125rem; }
.bpr-mock__chip {
	flex: 0 0 auto;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-success) 16%, #fff);
	color: var(--color-success);
	font-size: 0.75rem;
	font-weight: 600;
}
.bpr-mock__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 1rem 0 0;
	padding: 0;
}
.bpr-mock__tags li {
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: var(--brand-paper-100);
	color: var(--brand-charcoal-700);
	font-size: 0.75rem;
}

/* Tracked-changes card */
.bpr-mock__doc {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.9;
	margin: 0;
	color: var(--brand-ink-900);
}
.bpr-mock__doc ins {
	text-decoration: none;
	color: var(--brand-green-700);
	background: var(--brand-green-50);
	border-bottom: 1.5px solid var(--brand-green-500);
	padding: 0 0.1em;
}
.bpr-mock__doc del {
	color: var(--color-error, #C0392B);
	text-decoration: line-through;
	opacity: 0.7;
}
.bpr-mock__comment {
	margin-top: 1rem;
	padding: 0.65rem 0.85rem;
	border-left: 3px solid var(--color-accent);
	background: var(--color-accent-wash);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: 0.8125rem;
	color: var(--brand-charcoal-700);
}
.bpr-mock__comment-author {
	display: block;
	font-weight: 600;
	color: var(--brand-ink-900);
	margin-bottom: 0.15rem;
}

/* Delivery card */
.bpr-mock--delivery {
	padding: 1.5rem 1.25rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.bpr-mock__check {
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--color-success) 16%, #fff);
	color: var(--color-success);
	font-size: 1.25rem;
}
.bpr-mock__delivery-title { font-family: var(--font-display); font-size: 1.125rem; }
.bpr-mock__file {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--brand-paper-200);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	text-align: left;
}
.bpr-mock__file > i { color: var(--brand-green-700); }
.bpr-mock__file .bpr-mock__file-name { flex: 1 1 auto; }
.bpr-mock__dl {
	flex: 0 0 auto;
	color: var(--brand-green-700);
}

@media (max-width: 860px) {
	.bpr-stepflow { gap: var(--sp-6, 2rem); }
	.bpr-stepflow__row,
	.bpr-stepflow__row--reverse {
		grid-template-columns: 1fr;
		gap: var(--sp-5, 1.5rem);
	}
	/* Stack text above the visual on every row (ignore the desktop swap). */
	.bpr-stepflow__row--reverse .bpr-stepflow__text   { order: 1; }
	.bpr-stepflow__row--reverse .bpr-stepflow__visual { order: 2; }
	.bpr-stepflow__body { max-width: none; }
	.bpr-mock { max-width: 340px; }
}

/* FAQ accordion — reused by the use-case pages and the join-team page. */
.bpr-faq__item {
	margin-bottom: 1rem;
	padding: 1rem 1.25rem;
	background: var(--card-surface, #fff);   /* white on the greige FAQ wash; panel if ever on paper (run-2) */
	border: 1px solid var(--brand-paper-200);
	border-radius: 8px;
}
.bpr-faq__q {
	font-family: var(--font-sans);
	font-weight: 600;
	cursor: pointer;
	color: var(--brand-ink-900);
}
.bpr-faq__a {
	margin: 0.75rem 0 0;
	font-family: var(--font-body);
	line-height: 1.7;
	color: var(--brand-charcoal-700, #3C3C3B);
}

/* ---- Instant-quote section (#19) ------------------------------------------ */
.bpr-iq__card {
  max-width: 1040px;
  margin: var(--sp-6, 2rem) auto 0;
  background: var(--card-surface, #fff);   /* white on the greige instant-quote wash (run-2) */
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-6, 2rem);
}
.bpr-iq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6, 2rem);
  align-items: stretch;
}
@media (min-width: 880px) { .bpr-iq__grid { grid-template-columns: 1fr 1fr; } }

.bpr-iq__selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3, 0.75rem);
  margin-bottom: var(--sp-3, 0.75rem);
}
/* On the narrowest viewports two side-by-side dropdowns are too tight — stack
   them so the trigger labels never truncate. */
@media (max-width: 479px) {
  .bpr-iq__selectors { grid-template-columns: 1fr; }
}
.bpr-iq__field { display: block; }
.bpr-iq__field--words { margin-top: var(--sp-2, 0.5rem); }
.bpr-iq__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-charcoal-700);
  margin-bottom: 0.3rem;
}
.bpr-iq__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brand-ink-900);
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.bpr-iq__input:focus {
  outline: none;
  border-color: var(--brand-green-700);
  box-shadow: 0 0 0 3px rgba(58,170,53,0.15);
}
/* Service + deadline use the shared styled dropdown (.chk-dropdown__*). The
   wrapper owns the positioning context for the absolutely-positioned menu, and
   the trigger is sized to match .bpr-iq__input so the calculator's three
   controls read as one set. */
.bpr-iq__dropdown { position: relative; }
.bpr-iq__dropdown .chk-dropdown__trigger {
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
}
.bpr-iq__dropdown .chk-dropdown__trigger:focus,
.bpr-iq__dropdown .chk-dropdown__trigger.is-open {
  border-color: var(--brand-green-700);
  box-shadow: 0 0 0 3px rgba(58,170,53,0.15);
}
.bpr-iq__words { position: relative; display: block; }
.bpr-iq__words .bpr-iq__input { padding-right: 4rem; }
.bpr-iq__words-suffix {
  position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 0.875rem; color: var(--brand-charcoal-500);
  pointer-events: none;
}
.bpr-iq__price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4, 1rem);
  margin-top: var(--sp-5, 1.5rem);
}
.bpr-iq__price-label {
  font-family: var(--font-body); font-size: 0.8125rem; color: var(--brand-charcoal-500);
  margin: 0 0 0.15rem;
}
.bpr-iq__price-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1;
  color: var(--brand-ink-900);
}
.bpr-iq__cta { flex-shrink: 0; }
/* On phones the price + non-shrinking large CTA don't fit on one line, so the
   button bled past the card's right edge. Stack them: price on top, full-width
   CTA below — a stronger, thumb-friendly mobile target that can't overflow. */
@media (max-width: 560px) {
  .bpr-iq__price-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3, 0.75rem);
  }
  .bpr-iq__cta { width: 100%; }
}

/* Upload column */
.bpr-iq__upload {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bpr-iq__upload-hint {
  font-family: var(--font-body); font-size: 0.875rem; color: var(--brand-charcoal-500);
  text-align: center; margin: 0 0 var(--sp-3, 0.75rem);
}
.bpr-iq__dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 200px;
  padding: var(--sp-5, 1.5rem);
  text-align: center;
  border: 2px dashed var(--brand-paper-200);
  border-radius: var(--radius-lg);
  background: var(--brand-paper-50);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.bpr-iq__dropzone:hover { border-color: var(--brand-green-300); background: #fff; }
.bpr-iq__dropzone.is-dragover { border-color: var(--brand-green-700); background: var(--brand-green-50); border-style: solid; }
.bpr-iq__dropzone.is-uploading { border-color: var(--brand-green-700); background: #fff; border-style: solid; }
.bpr-iq__dropzone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--brand-green-100); color: var(--brand-green-700);
  font-size: 1.25rem;
}
.bpr-iq__dropzone-title {
  font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--brand-ink-900);
}
.bpr-iq__dropzone-link { color: var(--brand-green-700); text-decoration: underline; }
.bpr-iq__dropzone-sub {
  font-family: var(--font-body); font-size: 0.75rem; color: var(--brand-charcoal-500);
}
.bpr-iq__file {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}

/* Subject-area list on the "Leading in expertise" homepage section. */
.bpr-expertise-list {
	list-style: none;
	padding: 0;
	margin: var(--sp-2, 0.5rem) 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem 1.25rem;
	font-family: var(--font-body);
	color: var(--brand-charcoal-700);
}
@media (min-width: 576px) { .bpr-expertise-list { grid-template-columns: 1fr 1fr; } }
.bpr-expertise-list li {
	position: relative;
	padding-left: 1.4rem;
	line-height: 1.5;
}
.bpr-expertise-list li::before {
	content: "\f00c"; /* fa-check */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 0.15rem;
	font-size: 0.75rem;
	color: var(--brand-green-700);
}


/* CSS for service pages */
header.service-masthead {
	background: linear-gradient(#eeedef, #ffffff);
}

@media (max-width: 767.5px) {
	header.service-masthead {
		padding-top: 70px;
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	header.service-masthead {
		height: 290px;
		padding-top: 70px;
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	header.service-masthead {
		height: 290px;
		padding-top: 70px;
	}
}

@media (min-width: 1200px) {
	header.service-masthead {
		height: 290px;
		padding-top: 70px;
	}
}

.service-body {
	background-color: #ffffff;
	padding-top: 1rem;
}

.service-title {
	font-family: var(--font-display);  /* Lora — brand display heading */
	font-weight: 600;
	color: #4d535b;
	font-size: 24pt;
	letter-spacing: -0.01em;
}

.sample-pane {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
	transition: box-shadow .3s;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.sample-pane:hover {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);	
}

header.careers-masthead {
	background: linear-gradient(#eeedef, #ffffff);
}

@media (max-width: 767.5px) {
	header.careers-masthead {
		padding-top: 70px;
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	header.careers-masthead {
		height: 310px;
		padding-top: 90px;
	}
}

@media (min-width: 992px) and (max-width: 1200px) {
	header.careers-masthead {
		height: 310px;
		padding-top: 90px;
	}
}

@media (min-width: 1200px) {
	header.careers-masthead {
		height: 310px;
		padding-top: 90px;
	}
}

/* For payment pages */
@media (max-width: 576px) {
	.payment-un-masthead {
		height: 580px
	}
}

@media (min-width: 576px) {
	.payment-un-masthead {
		height: 350px;
	}
}

@media (max-width: 576px) {
	.payment-su-masthead {
		height: 530px
	}
}

@media (min-width: 576px) {
	.payment-su-masthead {
		height: 270px;
	}
}

@media (max-width: 768px) {
	.upload-masthead {
		height: 420px
	}
}

@media (min-width: 768px) {
	.upload-masthead {
		height: 230px;
	}
}

/* CSS for forms */
.form-shadow {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}

.form-shadow-nbar {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.2)
}

/* -----------------------------------------------------------------
   Reviews surface — .bpr-review-card + .bpr-review-stats (UI8, WS2)
   ----------------------------------------------------------------- */

.bpr-reviews-shell {
	background: var(--brand-paper-50);
	/* Paper field — cards on it take the panel tone so they lift off the paper
	   (run-2 card-surface mechanism; this shell is a paper host but not a
	   .bpr-section, so it wires the property itself). */
	--card-surface: var(--brand-paper-100);
}

.bpr-review-card {
	background: var(--card-surface, #fff);
	border: 1px solid var(--brand-paper-200);
	border-radius: var(--radius-md);
	padding: var(--sp-5);
	margin-bottom: var(--sp-4);
}

.bpr-review-card--empty {
	text-align: center;
	color: var(--brand-charcoal-500);
}

.bpr-review-card--empty .bpr-review-card__empty-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--brand-ink-900);
	margin-bottom: var(--sp-2);
}

.bpr-review-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	margin-bottom: var(--sp-3);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--brand-paper-200);
}

.bpr-review-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--brand-charcoal-500);
}

.bpr-review-card__name {
	font-weight: 600;
	color: var(--brand-ink-900);
	font-size: 0.9375rem;
}

.bpr-review-card__flag {
	vertical-align: middle;
}

.bpr-review-card__verified {
	color: var(--brand-green-700);
	font-size: 0.8125rem;
	font-weight: 500;
}

.bpr-review-card__stars {
	color: var(--color-accent);
	font-size: 0.9375rem;
	flex-shrink: 0;
}

.bpr-review-card__body {
	font-family: var(--font-body);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--brand-charcoal-700);
}

.bpr-review-card__reply {
	margin-top: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: var(--brand-paper-100, #F4F2EC);
	border-left: 3px solid var(--brand-green-700);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.bpr-review-card__reply-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--brand-green-700);
	margin: 0 0 var(--sp-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.bpr-review-card__reply-body {
	font-family: var(--font-body);
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--brand-charcoal-700);
}

/* Stats sidebar */
.bpr-review-stats {
	background: var(--card-surface, #fff);
	border: 1px solid var(--brand-paper-200);
	border-radius: var(--radius-md);
	padding: var(--sp-5);
	text-align: center;
	position: sticky;
	top: calc(var(--nav-height) + var(--sp-4));
}

.bpr-review-stats__header {
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--brand-paper-200);
}

.bpr-review-stats__avg {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	color: var(--brand-ink-900);
	margin: 0 0 var(--sp-1);
}

.bpr-review-stats__star {
	font-size: 1.5rem;
	color: var(--color-accent);
	margin-left: 0.2rem;
}

.bpr-review-stats__count {
	font-family: var(--font-body);
	font-size: 0.875rem;
	color: var(--brand-charcoal-500);
	margin: 0;
}

.bpr-review-stats__bars {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--sp-4);
	text-align: left;
}

.bpr-review-stats__bar-row {
	margin-bottom: var(--sp-2);
}

.bpr-review-stats__bar-link {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	text-decoration: none;
	color: var(--brand-charcoal-700);
	font-size: 0.875rem;
}

.bpr-review-stats__bar-link:hover {
	color: var(--brand-green-700);
	text-decoration: none;
}

.bpr-review-stats__bar-link--active {
	color: var(--brand-green-700);
	font-weight: 600;
}

.bpr-review-stats__bar-link--active .bpr-review-stats__bar-fill {
	background: var(--color-primary);
}

.bpr-review-stats__bar-label {
	flex: 0 0 2.2rem;
	color: var(--color-accent-text);
	font-weight: 500;
}
/* The star glyph is gold (matches the average-rating star + the app-wide
   star convention); the digit keeps the forest label colour, and the data
   bar fill below stays forest. */
.bpr-review-stats__bar-label i { color: var(--color-accent); }

.bpr-review-stats__bar-track {
	flex: 1;
	height: 8px;
	background: var(--brand-paper-200);
	border-radius: 999px;
	overflow: hidden;
}

.bpr-review-stats__bar-fill {
	display: block;
	height: 100%;
	background: var(--brand-green-700);
	border-radius: 999px;
}

.bpr-review-stats__bar-pct {
	flex: 0 0 2.5rem;
	text-align: right;
	color: var(--brand-charcoal-500);
	font-size: 0.8125rem;
}

/* =========================================================================
   Flash toasts (NOTIF1) moved to content/static/content/toasts.css so the
   writer + admin shells share the one toast system (they don't load this big
   marketing stylesheet). All four shells now <link> toasts.css and include
   content/_partials/_messages.html. Only the download spinner that
   historically lived here remains below.
   ========================================================================= */

/* Inline spinner for download buttons while the server generates the file
   (download-spinner.js). currentColor so it matches whatever button it's in. */
.bpr-dl-spinner {
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.45em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -0.1em;
	animation: bpr-spin 0.6s linear infinite;
}
a.is-downloading { cursor: progress; opacity: 0.85; }
@keyframes bpr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.bpr-dl-spinner { animation-duration: 1.4s; }
}

/* -----------------------------------------------------------------
   Under-masthead sub-navigation (.bpr-subnav)
   --------------------------------------------------------------- */
/* Data-driven pill row that sits directly under the page masthead,
   linking sibling pages (service variants, careers services, legal
   pages). Renders as a centred row on wide viewports and a
   horizontally-scrollable carousel on narrow ones (native scroll +
   scroll-snap — no JS, no layout shift). Replaces the legacy
   `section-subtitle | badge-pill` markup that was inlined per page.
   Markup: content/templates/content/_partials/_sub_nav*.html */

.bpr-subnav {
	/* Own band under the masthead with a single hairline below it
	   (the legacy design used two <hr>s and was not vertically centred). */
	position: relative;
	border-bottom: 1px solid var(--brand-paper-200);
	background: var(--brand-paper-50);
	overflow-x: hidden;
}

/* Positioning context for the arrows + edge fades, centred and capped so the
   arrows sit at the content edges (not the viewport edges) on wide screens. */
.bpr-subnav__viewport {
	position: relative;
	max-width: var(--container-wide);  /* 1240px — wide enough for the 9 service
	                                      pills to fit centred at desktop without
	                                      clipping; narrower viewports still scroll */
	margin: 0 auto;
}

/* Edge fades — hint that the row scrolls. Shown only when the track overflows
   and is not already scrolled to that edge (classes set by the controller). */
.bpr-subnav__viewport::before,
.bpr-subnav__viewport::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4rem;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 150ms ease;
}
/* Hold the band colour solid for the first third, then fade — this reads
   clearly as "the row continues" (a plain edge-to-transparent gradient was
   too faint against the paper background, so the clipped pill just looked
   truncated on touch, where the fade is the only scroll hint). */
.bpr-subnav__viewport::before {
	left: 0;
	background: linear-gradient(to right, var(--brand-paper-50) 35%, transparent);
}
.bpr-subnav__viewport::after {
	right: 0;
	background: linear-gradient(to left, var(--brand-paper-50) 35%, transparent);
}
.bpr-subnav.is-overflowing:not(.is-at-start) .bpr-subnav__viewport::before { opacity: 1; }
.bpr-subnav.is-overflowing:not(.is-at-end)   .bpr-subnav__viewport::after  { opacity: 1; }

.bpr-subnav__track {
	list-style: none;
	margin: 0;
	padding: var(--sp-4) var(--sp-5);
	display: flex;
	/* Never wrap. Centre the pills when they fit; become a horizontal-scroll
	   carousel when they overflow (same proven pattern as .blog-nav). */
	flex-wrap: nowrap;
	justify-content: safe center;
	align-items: center;        /* vertical centring within the band */
	gap: var(--sp-2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;      /* hide scrollbar chrome (Firefox) */
	-ms-overflow-style: none;
}
.bpr-subnav__track::-webkit-scrollbar { display: none; }

/* Prev / next scroll arrows — circular buttons floating over the band edges,
   revealed by Alpine x-show only when the row overflows. */
.bpr-subnav__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--brand-paper-200);
	background: #fff;
	box-shadow: var(--shadow-1);
	color: var(--brand-green-700);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.bpr-subnav__arrow--prev { left: 0.5rem; }
.bpr-subnav__arrow--next { right: 0.5rem; }
.bpr-subnav__arrow:hover {
	background: var(--brand-green-50);
	border-color: var(--brand-green-300);
}
.bpr-subnav__arrow:focus-visible {
	outline: 2px solid var(--brand-green-300);
	outline-offset: 2px;
}
.bpr-subnav__arrow-chev {
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
}
.bpr-subnav__arrow--prev .bpr-subnav__arrow-chev { transform: rotate(135deg); margin-left: 0.18rem; }
.bpr-subnav__arrow--next .bpr-subnav__arrow-chev { transform: rotate(-45deg); margin-right: 0.18rem; }

.bpr-subnav__item {
	display: flex;
	flex: 0 0 auto;             /* don't shrink — keeps each pill on one line */
	scroll-snap-align: start;
}

.bpr-subnav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	padding: 0.4rem 0.9rem;
	min-height: 2.1rem;         /* trimmed from 2.5rem — lighter secondary nav */
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 0.85rem;         /* was 0.9375rem — too heavy beside the page body */
	line-height: 1;
	letter-spacing: 0;
	color: var(--brand-charcoal-700);
	background: transparent;
	text-decoration: none;
	transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

a.bpr-subnav__link:hover,
a.bpr-subnav__link:focus-visible {
	color: var(--brand-green-700);
	background: var(--brand-green-50);
	border-color: var(--brand-green-100);
	text-decoration: none;
}

a.bpr-subnav__link:focus-visible {
	outline: 2px solid var(--brand-green-300);
	outline-offset: 2px;
}

.bpr-subnav__link--active {
	color: #fff;
	background: var(--brand-green-700);
	border-color: var(--brand-green-700);
	cursor: default;
}

/* Narrow viewports: a horizontally-scrollable carousel. No wrap, snap to
   each pill, momentum scroll on touch, edge fade hint via padding. */
@media (max-width: 768px) {
	.bpr-subnav__track {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding: var(--sp-3) var(--sp-4);
		/* Keep snapped / scrolled-into-view pills clear of the 3rem edge fades,
		   so the active pill is never half-hidden under a fade on load (the
		   "carousel doesn't show properly" mobile rough edge, UAT 2026-06-03). */
		scroll-padding-inline: var(--sp-5);
		/* Hide the scrollbar but keep scrollability (Firefox + WebKit). */
		scrollbar-width: none;
	}
	.bpr-subnav__track::-webkit-scrollbar {
		display: none;
	}
	.bpr-subnav__item {
		scroll-snap-align: start;
		flex: 0 0 auto;
	}
}

/* Drop the arrows only on real touch devices — they swipe the row naturally,
   and floating arrows would cover pills on a narrow band. Gate on input
   *capability*, not viewport width: a narrow MOUSE viewport (e.g. a resized
   desktop window 600–768px) can't swipe and the scrollbar is hidden, so it
   must keep the arrows. The edge fades remain the touch scroll hint. */
@media (hover: none) and (pointer: coarse) {
	.bpr-subnav__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bpr-subnav__track { scroll-behavior: auto; }
	.bpr-subnav__link { transition: none; }
}

/* Profile sub-service page hero art (content-ia-service-overhaul). A supplied
   image (see profiles/IMAGE-MANIFEST.md) renders rounded with a soft shadow;
   when none is set, a branded placeholder with the sub-service icon shows. */
.profile-svc-art img {
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(31, 82, 54, 0.12);
}
.profile-svc-art__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 11;
	border-radius: 14px;
	background:
		radial-gradient(circle at 30% 28%, rgba(31, 82, 54, 0.12), transparent 62%),
		linear-gradient(135deg, var(--brand-green-50), var(--brand-paper-100));
	border: 1px solid var(--brand-paper-200);
	color: var(--color-primary);
}
.profile-svc-art__ph i { font-size: 5rem; opacity: 0.6; }

/* Before/after document sample slider (content-ia-service-overhaul; matte
   frame added resolve-ui-batch). The outer .ba-slider is the frame: a paper
   matte with a border + a taller top band that holds the Before/After tags so
   they never overlap the document text. The inner .ba-slider__stage carries
   the JS hook + the clipped image comparison + the drag handle, so the drag
   math measures the image area (not the padded frame), and every sample reads
   with a consistent border regardless of its own screenshot background. */
.ba-slider {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	padding: 46px 14px 14px;
	border-radius: 14px;
	background: var(--brand-paper-100);
	border: 1px solid var(--brand-paper-200);
	box-shadow: 0 12px 34px rgba(31, 82, 54, 0.14);
	user-select: none;
	-webkit-user-select: none;
}
.ba-slider__stage {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--brand-paper-200);
	touch-action: pan-y;
	cursor: ew-resize;
}
.ba-slider__img { display: block; width: 100%; height: auto; }
.ba-slider__before {
	position: absolute;
	inset: 0;
	clip-path: inset(0 50% 0 0);
	will-change: clip-path;
}
.ba-slider__before .ba-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The AFTER image (base layer) sets the stage height; this taller BEFORE
	   image is cropped to cover it. Anchor the crop to the TOP so the document's
	   first line keeps its margin (centre-cropping ate it) and the before/after
	   tops line up — the samples all trail into ample bottom whitespace. */
	object-position: center top;
}
.ba-slider__tag {
	position: absolute;
	top: 13px;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	z-index: 3;
	pointer-events: none;
}
.ba-slider__tag--before { left: 16px; background: rgba(31, 82, 54, 0.92); }
.ba-slider__tag--after { right: 16px; background: rgba(40, 40, 40, 0.82); }
.ba-slider__handle {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 44px;
	transform: translateX(-50%);
	background: transparent;
	border: 0;
	padding: 0;
	cursor: ew-resize;
	z-index: 4;
}
.ba-slider__handle::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 1px rgba(31, 82, 54, 0.25);
}
.ba-slider__handle-grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.ba-slider__handle:focus-visible { outline: none; }
.ba-slider__handle:focus-visible .ba-slider__handle-grip {
	box-shadow: 0 0 0 3px var(--brand-green-50), 0 2px 10px rgba(0, 0, 0, 0.22);
}
.ba-slider__stage.is-dragging { cursor: ew-resize; }