/* =========================================================================
   THEORYS — About page (template-about.php)

   Rides the shop shell, so theorys-shop.css has already supplied the brand
   tokens, the header, the footer, .thr-wrap, .thr-eyebrow, .thr-lead,
   .thr-crumbs and every .thr-btn variant. This sheet is declared as depending
   on it and only adds what a long-form page needs on top: a document head, a
   readable measure, and the reason list.

   Deliberately short. The legal pages already prove out this shape
   (theorys-legal.css) — the difference is that this page has no numbering, no
   table of contents and no section rail, so almost none of that sheet applied
   and borrowing its class names on a marketing page would have been a lie about
   what those classes are for.
   ========================================================================= */

/* ---------- HEAD ---------------------------------------------------------- */

.thr-about-head {
	background: var(--white);
	padding: 40px 0 30px;
	border-bottom: 1px solid var(--line);
}
.thr-about-title {
	font-size: clamp(29px, 4.6vw, 44px);
	line-height: 1.06;
	margin: 0 0 14px;
	max-width: 22ch;
}
/* The two head paragraphs sit under .thr-lead, which is already the right
   colour and measure; these only need spacing and a slightly tighter measure
   than the lead's 62ch so the block does not read as one wall. */
.thr-about-blurb,
.thr-about-ruo {
	max-width: 66ch;
	font-size: 15.5px;
	line-height: 1.7;
	color: #3a423d;
	margin: 16px 0 0;
}
/* The research-use line is the one sentence on this page that is a legal
   position rather than a claim, so it is set apart the way the buy box sets
   apart its own RUO line. */
.thr-about-ruo {
	font-size: 13.5px;
	color: var(--forest-mid);
	font-weight: 500;
}

/* ---------- BODY --------------------------------------------------------- */

/* NO max-width here. It had one, and because .thr-wrap centres its own box the
   whole body indented ~265px away from the head's left edge on a wide screen —
   the page looked like two documents. The MEASURE is capped per paragraph
   further down (74ch), which is what keeps long-form copy readable without
   moving the column. */
.thr-about-body { padding-top: 34px; padding-bottom: 72px; }

.thr-about-section { margin: 0 0 40px; }
.thr-about-section:last-of-type { margin-bottom: 0; }
.thr-about-section h2 {
	font-family: var(--font-head);
	font-size: clamp(20px, 2.4vw, 25px);
	line-height: 1.2;
	margin: 0 0 14px;
	color: var(--ink);
}
.thr-about-section p {
	max-width: 74ch;
	font-size: 15.5px;
	line-height: 1.75;
	color: #3a423d;
	margin: 0 0 14px;
}
.thr-about-section > p:last-child { margin-bottom: 0; }

/* EVERY link in the body copy, not just the ones carrying the class.
   thr_legal_link() emits a bare <a>, so without the descendant selectors the
   "Research Use Only" link rendered in the browser's default blue — and visited
   purple — in the middle of a brand page. */
.thr-about-link,
.thr-about-section p a,
.thr-about-reason p a,
.thr-about-address a {
	color: var(--forest-mid);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.thr-about-link:hover,
.thr-about-section p a:hover,
.thr-about-reason p a:hover,
.thr-about-address a:hover { color: var(--forest-deep); }

/* ---------- THE REASON LIST ---------------------------------------------- */

/* One column, not a grid of cards: these are five short arguments meant to be
   read in order, and a card grid turns them into a feature matrix nobody
   reads. The rule on the left is what makes it a list rather than five
   paragraphs. */
.thr-about-reasons {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 22px;
}
.thr-about-reason {
	border-left: 2px solid var(--line);
	padding: 2px 0 2px 18px;
}
.thr-about-reason h3 {
	font-family: var(--font-head);
	font-size: 15px;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--forest-deep);
}
.thr-about-reason p { margin: 0; }

/* ---------- CTA SECTIONS — REMOVED 2026-09-11 ---------------------------
   .thr-about-section--cta, .thr-about-cta-line and .thr-about-cta-alt styled the
   two tinted cards that ended in Partner with Theorys and Create an Account.
   Both sections were deleted from the template (a dedicated wholesale page is
   replacing them), so the rules went with them rather than sitting here matching
   nothing. The card treatment was: --off-white fill, 1px --line border, 14px
   radius, 26px/24px padding rising to 30px at the 900px breakpoint.
   ---------------------------------------------------------------------- */

/* ---------- CONTACT + FOOT ----------------------------------------------- */

.thr-about-address {
	font-style: normal;
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--ink);
	margin: 0 0 18px;
	padding: 16px 18px;
	background: var(--off-white);
	border: 1px solid var(--line);
	border-radius: 12px;
	display: inline-block;
}
.thr-about-foot {
	margin: 40px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--platinum-lo);
}

@media (min-width: 900px) {
	.thr-about-head { padding: 52px 0 38px; }
	.thr-about-body { padding-top: 44px; }
	.thr-about-section { margin-bottom: 52px; }
}