/* Scale From Here members area — brand v1.1, matched to the Elementor pages.
   Tokens live on .sfh, never :root, so nothing leaks into the client's pages.
   Every rule is two classes deep (.sfh .sfh-…): Hello Elementor's reset styles
   button, [type=submit], inputs and headings at class-level specificity and
   loads after us, so a one-class rule silently loses.

   Shape language (measured on the About and Contact pages): square corners
   everywhere, Sora 800 headings with tight tracking, eyebrow labels in cobalt
   or slate, white as the default surface with pale blue as an accent block,
   1px hairline dividers, and form cards with a soft drop shadow and a short
   cobalt bar on the top edge. */

.sfh {
	--sfh-navy: #05255A;
	--sfh-cobalt: #0D52C6;
	--sfh-pale: #C4D0EB;
	--sfh-ink: #051C2A;
	--sfh-white: #FFFFFF;
	--sfh-slate: #4A5667;      /* the site's eyebrow and lead colour on light backgrounds */
	--sfh-muted: #64727B;      /* Ink at 62% flattened onto white; a solid so it cannot drift on other backgrounds */
	--sfh-error: #B3261E;      /* not in the brand guide; forms need one */
	--sfh-hairline: #F1F5F9;   /* the site's divider and card edge */
	--sfh-field: #F8FAFC;      /* HubSpot field fill on the public forms */
	--sfh-field-border: #CBD5E1;
	--sfh-line: rgba(5, 37, 90, .28);
	--sfh-shadow-card: 0 20px 50px rgba(5, 28, 42, .08);
	--sfh-inset: 10px;         /* the Elementor sections sit 10px in from the viewport */
	--sfh-heading: Sora, "Helvetica Neue", Arial, sans-serif;
	--sfh-body: Lato, "Helvetica Neue", Arial, sans-serif;

	/* the wrapper IS the field */
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 96px;
	background: var(--sfh-white);
	color: var(--sfh-ink);
	font-family: var(--sfh-body);
	font-size: 17px;
	line-height: 1.6;
}
.sfh *, .sfh *::before, .sfh *::after { box-sizing: border-box; }

.sfh .sfh-container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; }
.sfh.sfh--account .sfh-container { max-width: 640px; }
.sfh.sfh--auth .sfh-container { max-width: 1160px; }
@media (max-width: 720px) { .sfh .sfh-container { padding: 0 16px; } }

/* ---------- shared type ---------- */
.sfh .sfh-eyebrow { margin: 0 0 12px; font-family: var(--sfh-heading); font-weight: 800; font-size: 13px; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; color: var(--sfh-cobalt); }
.sfh .sfh-eyebrow--slate { color: var(--sfh-slate); }

/* ---------- band ---------- */
.sfh .sfh-band { position: relative; overflow: hidden; margin: 0 var(--sfh-inset) 56px; background: var(--sfh-navy); color: var(--sfh-white); }
/* The band's row is NOT the reading column: it spans the viewport with its own
   gutters, so the title sits near the left edge and the line runs off the right.
   Three classes deep to beat .sfh .sfh-container's max-width. */
.sfh .sfh-band .sfh-band__inner { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; padding: 88px 90px 72px; }
.sfh .sfh-band__text, .sfh .sfh-band__nav { position: relative; z-index: 1; } /* above the line */
.sfh .sfh-band__label { margin: 0 0 18px; font-family: var(--sfh-heading); font-weight: 800; font-size: 12px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--sfh-pale); }
.sfh .sfh-band__title { margin: 0; font-family: var(--sfh-heading); font-weight: 800; font-size: 60px; line-height: 1; letter-spacing: -.05em; color: var(--sfh-white); }
.sfh .sfh-band__nav { display: flex; gap: 28px; font-family: var(--sfh-heading); font-size: 14px; font-weight: 700; padding-bottom: 8px; }
.sfh .sfh-band__nav a { color: rgba(255,255,255,.9); text-decoration: none; }
.sfh .sfh-band__nav a:hover { color: var(--sfh-white); text-decoration: underline; }
.sfh .sfh-band__nav a:focus-visible { outline: 2px solid var(--sfh-white); outline-offset: 3px; }
.sfh .sfh-line { color: var(--sfh-cobalt); pointer-events: none; }
/* The cover's rising line: spans the band's full height across its right side,
   starting low near the middle and leaving at the top-right corner. Sits behind
   the title and nav; the nav is bottom-right, where the line is already high. */
.sfh .sfh-line--band { position: absolute; right: 0; top: 0; bottom: 0; width: 45%; min-width: 300px; height: 100%; z-index: 0; opacity: .9; }
@media (max-width: 900px) {
	.sfh .sfh-band .sfh-band__inner { padding: 64px 40px 52px; }
	.sfh .sfh-band__title { font-size: 48px; }
}
@media (max-width: 720px) {
	.sfh .sfh-band { margin-bottom: 32px; }
	.sfh .sfh-band .sfh-band__inner { flex-direction: column; align-items: flex-start; padding: 48px 20px 40px; }
	.sfh .sfh-band__title { font-size: 38px; letter-spacing: -.04em; }
	.sfh .sfh-line--band { width: 70%; min-width: 0; }
}

/* ---------- cards ----------
   Two treatments share the class. Feed posts are a hairline-divided list on
   white (the About page's numbered items). Form cards (account, auth) are the
   Contact page's card: square, hairline edge, soft shadow, cobalt bar on top. */
.sfh .sfh-card { position: relative; background: var(--sfh-white); border: 1px solid var(--sfh-hairline); border-radius: 0; box-shadow: var(--sfh-shadow-card); padding: 40px; margin: 0 0 32px; overflow-wrap: anywhere; }
.sfh .sfh-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 76px; height: 4px; background: var(--sfh-cobalt); }
@media (max-width: 720px) { .sfh .sfh-card { padding: 28px 20px; margin-bottom: 24px; } }
.sfh .sfh-card__title { margin: 0 0 24px; font-family: var(--sfh-heading); font-weight: 800; font-size: 30px; line-height: 1.1; letter-spacing: -.045em; color: var(--sfh-ink); }
.sfh .sfh-card--danger::before { background: var(--sfh-error); }
.sfh .sfh-card--danger .sfh-card__title { color: var(--sfh-error); }
.sfh .sfh-card > p { margin: 0 0 20px; color: var(--sfh-slate); }

/* feed and account: the About page's pale field — a faint 42px grid and one cobalt-ringed
   circle bleeding off the top right — with white cards on top of it. */
.sfh.sfh--feed, .sfh.sfh--account { padding-bottom: 12px; }
.sfh.sfh--feed .sfh-band, .sfh.sfh--account .sfh-band { margin-bottom: 0; }
.sfh .sfh-field { position: relative; overflow: hidden; margin: 0 var(--sfh-inset); padding: 56px 0 72px; background: var(--sfh-pale); }
.sfh .sfh-field::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(5, 28, 42, .15) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 28, 42, .15) 1px, transparent 1px); background-size: 42px 42px; opacity: .22; pointer-events: none; }
.sfh .sfh-field::after { content: ""; position: absolute; top: 120px; right: -180px; width: 680px; height: 680px; border: 1px solid rgba(13, 82, 198, .16); border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 90px rgba(13, 82, 198, .03); pointer-events: none; }
/* a second, smaller circle low on the left, so the field is not weighted to one corner */
.sfh .sfh-field__circle { position: absolute; left: -200px; bottom: -240px; width: 520px; height: 520px; border: 1px solid rgba(13, 82, 198, .16); border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 70px rgba(13, 82, 198, .03); pointer-events: none; }
.sfh .sfh-field .sfh-container { position: relative; z-index: 1; }
.sfh .sfh-field .sfh-card { border-color: rgba(5, 37, 90, .12); border-radius: 6px; }
.sfh .sfh-field .sfh-card::before { left: 18px; }
.sfh .sfh-feed__body .sfh-card { padding: 36px 40px 32px; margin: 0 0 24px; background: var(--sfh-white); border: 1px solid rgba(5, 37, 90, .12); border-radius: 6px; box-shadow: var(--sfh-shadow-card); }
.sfh .sfh-feed__body .sfh-card::before { display: block; top: -1px; left: 18px; }
.sfh .sfh-feed__empty { text-align: left; }
.sfh .sfh-feed__empty p { margin: 0; font-family: var(--sfh-heading); font-weight: 700; font-size: 21px; letter-spacing: -.035em; color: var(--sfh-ink); }
.sfh .sfh-feed__body .sfh-feed__pagination { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 0; margin: 0; background: none; border: 0; box-shadow: none; }
.sfh .sfh-feed__body .sfh-feed__pagination::before { display: none; }
.sfh .sfh-feed__pagination a { font-family: var(--sfh-heading); font-weight: 700; font-size: 15px; color: var(--sfh-cobalt); text-decoration: none; }
.sfh .sfh-feed__pagination a:hover { text-decoration: underline; }
@media (max-width: 720px) {
	.sfh .sfh-field { padding: 32px 0 48px; }
	.sfh .sfh-field::after { top: 60px; right: -160px; width: 420px; height: 420px; box-shadow: 0 0 0 50px rgba(13, 82, 198, .03); }
	.sfh .sfh-field__circle { left: -160px; bottom: -180px; width: 320px; height: 320px; box-shadow: 0 0 0 40px rgba(13, 82, 198, .03); }
	.sfh .sfh-feed__body .sfh-card { padding: 28px 20px 24px; margin-bottom: 16px; }
}

/* ---------- posts ---------- */
.sfh .sfh-post { border-top: 0; }
.sfh .sfh-post__date { display: block; margin: 0 0 14px; font-family: var(--sfh-heading); font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--sfh-cobalt); }
.sfh .sfh-post__title { margin: 0 0 14px; font-family: var(--sfh-heading); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -.045em; color: var(--sfh-ink); }
.sfh .sfh-post__body { font-size: 17px; line-height: 1.6; color: var(--sfh-ink); }
.sfh .sfh-post__body p { margin: 0 0 1em; }
.sfh .sfh-post__body p:last-child { margin-bottom: 0; }
.sfh .sfh-post__body a { color: var(--sfh-cobalt); text-decoration: none; }
.sfh .sfh-post__body a:hover { text-decoration: underline; }
.sfh .sfh-post__embed { position: relative; aspect-ratio: 16 / 9; margin: 0 0 20px; border-radius: 0; overflow: hidden; background: var(--sfh-navy); }
.sfh .sfh-post__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sfh .sfh-post__unavailable { margin: 16px 0 0; font-size: 14px; font-style: italic; color: var(--sfh-muted); }
.sfh .sfh-post__thumb { margin: 0 0 20px; }
.sfh .sfh-post__thumb img { display: block; width: 100%; height: auto; border-radius: 0; }

/* link card */
.sfh .sfh-post__linkcard { display: block; margin: 20px 0 0; border: 1px solid var(--sfh-field-border); border-radius: 0; overflow: hidden; background: var(--sfh-white); color: inherit; text-decoration: none; transition: border-color .15s ease; }
.sfh .sfh-post__linkcard:hover { border-color: var(--sfh-cobalt); }
.sfh .sfh-post__linkcard:focus-visible { outline: 2px solid var(--sfh-cobalt); outline-offset: 2px; }
.sfh .sfh-post__linkimage { display: block; background: var(--sfh-pale); }
.sfh .sfh-post__linkimage img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover; }
.sfh .sfh-post__linktext { display: block; padding: 18px 20px; }
.sfh .sfh-post__linkhost { display: block; font-family: var(--sfh-heading); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sfh-slate); }
.sfh .sfh-post__linkheadline { display: block; margin-top: 6px; font-family: var(--sfh-heading); font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -.02em; color: var(--sfh-ink); }
.sfh .sfh-post__linkdesc { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--sfh-slate); }
.sfh .sfh-post__linkurl { display: block; margin-top: 4px; font-size: 14px; color: var(--sfh-muted); word-break: break-all; }
@media (min-width: 620px) {
	.sfh .sfh-post__linkcard--rich:has(.sfh-post__linkimage) { display: grid; grid-template-columns: 200px 1fr; align-items: stretch; }
	.sfh .sfh-post__linkcard--rich .sfh-post__linkimage,
	.sfh .sfh-post__linkcard--rich .sfh-post__linkimage img { height: 100%; }
}

/* like button — behaviour and markup unchanged; tokens only */
.sfh .sfh-actions { float: left; margin: 20px 20px 0 0; } /* Like floats so the comments summary shares its row; the opened list clears it */
.sfh .sfh-actions .sfh-like { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-family: var(--sfh-heading); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .02em; color: var(--sfh-slate); background: none; border: 0; border-radius: 0; box-shadow: none; text-transform: none; cursor: pointer; transition: color .15s ease; }
.sfh .sfh-actions .sfh-like:hover { color: var(--sfh-navy); background: none; border: 0; }
.sfh .sfh-actions .sfh-like__icon { font-size: 14px; line-height: 1; transition: transform .15s ease; }
.sfh .sfh-actions .sfh-like.is-liked { color: var(--sfh-cobalt); }
.sfh .sfh-actions .sfh-like.is-liked .sfh-like__icon { transform: scale(1.12); }
.sfh .sfh-actions .sfh-like__count { font-variant-numeric: tabular-nums; }
.sfh .sfh-actions .sfh-like:focus-visible { outline: 2px solid var(--sfh-cobalt); outline-offset: 3px; }

/* ---------- comments ---------- */
.sfh .sfh-comments { margin-top: 20px; }
.sfh .sfh-post::after { content: ""; display: block; clear: both; }
.sfh .sfh-comments__summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; list-style: none; font-family: var(--sfh-heading); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .02em; color: var(--sfh-slate); cursor: pointer; }
.sfh .sfh-comments__summary::-webkit-details-marker { display: none; }
.sfh .sfh-comments__summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
.sfh .sfh-comments[open] > .sfh-comments__summary::before { transform: rotate(45deg); }
.sfh .sfh-comments__summary:hover { color: var(--sfh-navy); }
.sfh .sfh-comments__summary:focus-visible { outline: 2px solid var(--sfh-cobalt); outline-offset: 3px; }
.sfh .sfh-comments__count { font-variant-numeric: tabular-nums; }
.sfh .sfh-comments__list { clear: both; list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--sfh-field-border); }
.sfh .sfh-comment { padding: 16px 0; border-bottom: 1px solid var(--sfh-field-border); }
.sfh .sfh-comment:focus { outline: none; }
.sfh .sfh-comment:focus-visible { outline: 2px solid var(--sfh-cobalt); outline-offset: 2px; }
.sfh .sfh-comment__meta { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.sfh .sfh-comment__author { font-family: var(--sfh-heading); font-weight: 700; font-size: 15px; letter-spacing: -.02em; color: var(--sfh-ink); }
.sfh .sfh-comment__date { font-size: 13px; color: var(--sfh-slate); }
.sfh .sfh-comment__delete { margin-left: auto; }
.sfh .sfh-comment__delete .sfh-comment__remove { padding: 0; font-family: var(--sfh-body); font-size: 13px; line-height: 1; color: var(--sfh-slate); background: none; border: 0; border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: normal; cursor: pointer; }
.sfh .sfh-comment__delete .sfh-comment__remove:hover { color: var(--sfh-error); background: none; border: 0; text-decoration: underline; }
.sfh .sfh-comment__delete .sfh-comment__remove:focus-visible { outline: 2px solid var(--sfh-cobalt); outline-offset: 3px; }
.sfh .sfh-comment__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sfh-ink); }
.sfh .sfh-comments__error { margin-top: 16px; }
.sfh .sfh-comments__error:empty { display: none; }
.sfh .sfh-comments__form { margin-top: 16px; }
.sfh .sfh-comments__form label { margin-bottom: 0; }

/* ---------- auth: pale hero, then copy beside the form card (the Contact page) ---------- */
.sfh .sfh-hero { margin: 0 var(--sfh-inset) 80px; background: var(--sfh-pale); }
.sfh .sfh-hero .sfh-hero__inner { max-width: none; padding: 104px 90px 76px; }
.sfh .sfh-panel__title { margin: 0; max-width: 14ch; font-family: var(--sfh-heading); font-weight: 800; font-size: 52px; line-height: 1.02; letter-spacing: -.06em; color: var(--sfh-ink); }
.sfh .sfh-hero__lead { margin: 28px 0 0; max-width: 630px; font-size: 25px; line-height: 1.36; color: var(--sfh-slate); }
.sfh .sfh-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px 96px; align-items: start; }
.sfh .sfh-panel__brand { position: relative; padding-top: 8px; }
.sfh .sfh-panel__headline { margin: 0; font-family: var(--sfh-heading); font-weight: 800; font-size: 37px; line-height: 1.08; letter-spacing: -.055em; color: var(--sfh-ink); }
.sfh .sfh-panel__lead { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--sfh-slate); }
.sfh .sfh-panel__perks-label { margin: 0 0 4px; padding-top: 28px; border-top: 1px solid var(--sfh-hairline); font-size: 14px; }
.sfh .sfh-panel__perks { list-style: none; margin: 0; padding: 0; }
.sfh .sfh-panel__perk { display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; padding: 18px 0; border-bottom: 1px solid var(--sfh-hairline); }
.sfh .sfh-panel__perk-num { padding-top: 3px; font-family: var(--sfh-heading); font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--sfh-cobalt); }
.sfh .sfh-panel__perk-text { display: block; }
.sfh .sfh-panel__perk-text strong { display: block; margin: 0 0 4px; font-family: var(--sfh-heading); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.035em; color: var(--sfh-ink); }
.sfh .sfh-panel__perk-text span { display: block; font-size: 15px; line-height: 1.55; color: var(--sfh-slate); }
.sfh .sfh-panel__free { margin: 12px 0 32px; font-family: var(--sfh-heading); font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--sfh-navy); }
.sfh .sfh-panel__note { padding: 24px 0; border-top: 1px solid var(--sfh-hairline); }
.sfh .sfh-panel__note { border-bottom: 1px solid var(--sfh-hairline); }
.sfh .sfh-panel__side { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.sfh .sfh-panel__note--after { padding: 0; border: 0; }
.sfh .sfh-panel__note .sfh-eyebrow { margin-bottom: 8px; font-size: 14px; letter-spacing: .15em; }
.sfh .sfh-panel__note p:not(.sfh-eyebrow) { margin: 0; font-size: 16px; line-height: 1.55; color: var(--sfh-ink); }
.sfh .sfh-panel__note a { color: var(--sfh-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--sfh-cobalt); text-underline-offset: 3px; }
.sfh .sfh-panel__note a:hover { color: var(--sfh-cobalt); }
.sfh .sfh-panel__form { position: relative; background: var(--sfh-white); border: 1px solid var(--sfh-hairline); box-shadow: var(--sfh-shadow-card); padding: 51px; }
.sfh .sfh-panel__form::before { content: ""; position: absolute; top: -1px; left: -1px; width: 76px; height: 4px; background: var(--sfh-cobalt); }
.sfh .sfh-panel__form-title { margin: 0 0 8px; font-family: var(--sfh-heading); font-weight: 800; font-size: 37px; line-height: 1.08; letter-spacing: -.055em; color: var(--sfh-ink); }
.sfh .sfh-panel__form-lead { margin: 0 0 28px; font-size: 17px; line-height: 1.55; color: var(--sfh-slate); }
.sfh .sfh-panel__alt { margin: 24px 0 0; font-size: 15px; color: var(--sfh-slate); }
.sfh .sfh-panel__alt a { color: var(--sfh-cobalt); font-weight: 700; text-decoration: none; }
.sfh .sfh-panel__alt a:hover { text-decoration: underline; }
@media (max-width: 900px) {
	.sfh .sfh-hero .sfh-hero__inner { padding: 72px 40px 56px; }
	.sfh .sfh-panel__title { font-size: 44px; }
	.sfh .sfh-hero__lead { font-size: 21px; }
	.sfh .sfh-panel { grid-template-columns: 1fr; gap: 48px; }
	.sfh .sfh-panel__side { order: -1; } /* the form is why they came; the brand copy follows on one column */
	.sfh .sfh-panel__form { padding: 40px; }
}
@media (max-width: 720px) {
	.sfh .sfh-hero { margin-bottom: 48px; }
	.sfh .sfh-hero .sfh-hero__inner { padding: 56px 20px 44px; }
	.sfh .sfh-panel__title { font-size: 36px; letter-spacing: -.05em; }
	.sfh .sfh-hero__lead { margin-top: 20px; font-size: 18px; }
	.sfh .sfh-panel__headline { font-size: 30px; }
	.sfh .sfh-panel__form { padding: 28px 20px; }
	.sfh .sfh-panel__form-title { font-size: 30px; }
}

/* ---------- forms and controls (the public HubSpot forms and CTA) ---------- */
.sfh .sfh-form label { display: block; margin: 0 0 18px; font-family: var(--sfh-heading); font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--sfh-navy); }
.sfh .sfh-form__hint { font-family: var(--sfh-body); font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--sfh-slate); }
.sfh .sfh-form__check { display: flex; align-items: center; gap: 10px; font-family: var(--sfh-body); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--sfh-ink); }
.sfh .sfh-form input:not([type=checkbox]):not([type=hidden]) { display: block; width: 100%; height: 48px; margin-top: 8px; padding: 0 14px; font-family: var(--sfh-body); font-size: 16px; line-height: 48px; color: var(--sfh-ink); background: var(--sfh-field); border: 1px solid var(--sfh-field-border); border-radius: 0; box-shadow: none; }
.sfh .sfh-form input:not([type=checkbox]):not([type=hidden]):focus-visible { outline: 2px solid var(--sfh-cobalt); outline-offset: 0; border-color: var(--sfh-cobalt); background: var(--sfh-white); }
.sfh .sfh-form input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--sfh-cobalt); }
.sfh .sfh-form .sfh-button { display: inline-block; height: 57px; margin-top: 10px; padding: 0 29px; font-family: var(--sfh-heading); font-weight: 800; font-size: 15px; line-height: 57px; color: var(--sfh-white); background: var(--sfh-cobalt); border: 1px solid var(--sfh-cobalt); border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: normal; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.sfh .sfh-form .sfh-button:hover { background: var(--sfh-navy); border-color: var(--sfh-navy); color: var(--sfh-white); }
.sfh .sfh-form .sfh-button:focus-visible { outline: 2px solid var(--sfh-cobalt); outline-offset: 3px; }
.sfh.sfh--auth .sfh-form .sfh-button { display: block; width: 100%; }
.sfh .sfh-form .sfh-button--danger { color: var(--sfh-error); background: var(--sfh-white); border-color: var(--sfh-error); }
.sfh .sfh-form .sfh-button--danger:hover { color: var(--sfh-white); background: var(--sfh-error); border-color: var(--sfh-error); }
.sfh .sfh-form .sfh-button--danger:focus-visible { outline-color: var(--sfh-error); }
.sfh .sfh-form .sfh-button--small { height: 48px; line-height: 48px; padding: 0 22px; font-size: 14px; }
.sfh .sfh-form textarea { display: block; width: 100%; min-height: 96px; margin-top: 8px; padding: 12px 14px; font-family: var(--sfh-body); font-size: 16px; line-height: 1.5; color: var(--sfh-ink); background: var(--sfh-field); border: 1px solid var(--sfh-field-border); border-radius: 0; box-shadow: none; resize: vertical; }
.sfh .sfh-form textarea:focus-visible { outline: 2px solid var(--sfh-cobalt); outline-offset: 0; border-color: var(--sfh-cobalt); background: var(--sfh-white); }
.sfh .sfh-feed__pagination a:focus-visible,
.sfh .sfh-panel__alt a:focus-visible,
.sfh .sfh-panel__note a:focus-visible,
.sfh .sfh-post__body a:focus-visible,
.sfh .sfh-form input[type=checkbox]:focus-visible { outline: 2px solid var(--sfh-cobalt); outline-offset: 2px; }

/* ---------- messages ---------- */
.sfh .sfh-box { margin: 0 0 20px; padding: 14px 16px; font-size: 15px; line-height: 1.5; color: var(--sfh-ink); background: var(--sfh-field); border: 1px solid var(--sfh-hairline); border-left: 3px solid var(--sfh-cobalt); border-radius: 0; }
.sfh .sfh-box--notice { border-left-color: var(--sfh-cobalt); }
.sfh .sfh-box--error { border-left-color: var(--sfh-error); }
.sfh .sfh-box ul { margin: 0; padding-left: 18px; }

/* honeypot — unchanged */
.sfh .sfh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.sfh .sfh-actions .sfh-like, .sfh .sfh-actions .sfh-like__icon, .sfh .sfh-post__linkcard, .sfh .sfh-form .sfh-button, .sfh .sfh-comments__summary::before { transition: none; }
}