/* ==========================================================================
   Archfine v2 - shared components on every non-landing page (body.af2-site).
   Tokens come from v2-tokens.css. Blog and page-template specifics live in
   site-v2-blog.css and site-v2-pages.css.
   ========================================================================== */

.af2-site {
	color: var(--af2-ink);
	font-family: var(--af2-font);
	-webkit-font-smoothing: antialiased;
}
.af2-site #primary { background: var(--af2-paper); }
.af2-site :is(h1, h2, h3, h4, h5) { font-family: var(--af2-display); letter-spacing: -.02em; }
.af2-site ::selection { background: rgba(107, 85, 255, .2); }
.af2-site :focus-visible { outline: 2px solid var(--af2-brand); outline-offset: 3px; }
.af2-site .af2-i { width: 1em; height: 1em; flex: none; }

/* Gradient-serif accent usable anywhere: <em class="af2-accent"> */
.af2-site .af2-accent, .af2-site .gradient-text {
	font-family: var(--af2-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; padding-right: .06em;
	background: var(--af2-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Page hero (19 templates) ---------- */
.af2-site .archfine-page-hero {
	position: relative; isolation: isolate; overflow: hidden;
	padding: clamp(56px, 8vw, 104px) 0 clamp(44px, 6vw, 72px);
	background: var(--af2-paper); border-bottom: 1px solid var(--af2-line-2); text-align: center;
}
.af2-site .archfine-page-hero::before {
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image: linear-gradient(to right, rgba(13, 14, 20, .045) 1px, transparent 1px), linear-gradient(to bottom, rgba(13, 14, 20, .045) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 60% 80% at 50% 0%, #000 20%, transparent 75%);
}
.af2-site .archfine-page-hero::after {
	content: ''; position: absolute; left: 50%; top: -260px; z-index: -1; width: min(900px, 120vw); height: 520px; transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(143, 107, 255, .2), transparent 70%); pointer-events: none;
}
.af2-site .archfine-page-hero__title {
	max-width: 18ch; margin: 0 auto; color: var(--af2-ink);
	font: 650 clamp(38px, 5.6vw, 72px)/1.02 var(--af2-display); letter-spacing: -.04em; text-wrap: balance;
}
.af2-site .archfine-page-hero__desc {
	max-width: 640px; margin: 18px auto 0; color: var(--af2-muted);
	font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; text-wrap: pretty;
}
.af2-site .archfine-page-hero__date { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--af2-faint); }

/* Eyebrow + section title */
.af2-site .af2-eyebrow, .af2-site .archfine-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font: 600 12px/1 var(--af2-font); letter-spacing: .14em; text-transform: uppercase; color: var(--af2-brand-ink);
}
.af2-site .archfine-section-title {
	margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; color: var(--af2-ink);
	font: 650 clamp(28px, 3.6vw, 44px)/1.08 var(--af2-display); letter-spacing: -.035em; text-wrap: balance;
}

/* Page section bands */
.af2-site .archfine-page-section { padding: clamp(56px, 7vw, 96px) 0; background: transparent; }
.af2-site .archfine-page-section--alt { background: #fff; border-top: 1px solid var(--af2-line-2); border-bottom: 1px solid var(--af2-line-2); }

/* ---------- Buttons ---------- */
.af2-site .archfine-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
	font: 600 15px/1 var(--af2-font); text-decoration: none; cursor: pointer;
	transition: transform .2s var(--af2-ease), box-shadow .2s var(--af2-ease), background-color .2s, border-color .2s, color .2s;
}
.af2-site .archfine-btn--primary {
	color: #fff; border-color: transparent;
	background: linear-gradient(180deg, #2b2554 0%, #15131f 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(13, 14, 20, .2), 0 10px 24px -10px rgba(74, 52, 224, .55);
}
.af2-site .archfine-btn--primary:hover { color: #fff; transform: translateY(-1px); background: linear-gradient(180deg, #3a2f7a 0%, #1b1730 100%); }
.af2-site .archfine-btn--secondary, .af2-site .archfine-btn--ghost { color: var(--af2-ink); background: #fff; border-color: var(--af2-line); }
.af2-site .archfine-btn--secondary:hover, .af2-site .archfine-btn--ghost:hover { border-color: var(--af2-ink); color: var(--af2-ink); }
.af2-site .archfine-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.af2-site .archfine-btn--lg { min-height: 52px; padding: 0 24px; font-size: 16px; border-radius: 14px; }

/* ---------- Breadcrumbs ---------- */
.af2-site .archfine-breadcrumbs { background: transparent; border: 0; font-size: 13px; color: var(--af2-faint); }
.af2-site .archfine-breadcrumbs__link { color: var(--af2-muted); text-decoration: none; transition: color .2s; }
.af2-site .archfine-breadcrumbs__link:hover { color: var(--af2-brand-ink); }
.af2-site .archfine-breadcrumbs__current { color: var(--af2-ink); font-weight: 500; }
.af2-site .archfine-breadcrumbs__sep { color: #cfcbc3; }

/* ---------- Simple CTA (end of page templates) ---------- */
.af2-site .archfine-simple-cta {
	position: relative; overflow: hidden; isolation: isolate;
	padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 56px); border-radius: var(--af2-r-xl);
	background: var(--af2-night); color: #fff; text-align: center; border: 0;
}
.af2-site .archfine-simple-cta::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: radial-gradient(70% 100% at 50% 100%, rgba(107, 85, 255, .5), transparent 70%), radial-gradient(40% 60% at 85% 0%, rgba(215, 124, 255, .18), transparent 70%);
}
.af2-site .archfine-simple-cta__title { color: #fff; font: 650 clamp(26px, 3.4vw, 40px)/1.1 var(--af2-display); letter-spacing: -.035em; }
.af2-site .archfine-simple-cta__text { max-width: 560px; margin: 12px auto 24px; color: rgba(255, 255, 255, .75); font-size: 16.5px; }
.af2-site .archfine-simple-cta .archfine-btn--primary, .af2-site .archfine-simple-cta a[class*="bg-primary"] { background: #fff; color: var(--af2-ink); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.af2-site .archfine-simple-cta .archfine-btn--primary:hover { color: var(--af2-ink); }

/* ---------- Forms ---------- */
.af2-site :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], select, textarea):not([class*="af2-"]) {
	border-radius: 12px; border: 1px solid var(--af2-line); background: #fff; color: var(--af2-ink);
	font-family: var(--af2-font); transition: border-color .2s, box-shadow .2s;
}
.af2-site :is(input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], select, textarea):not([class*="af2-"]):focus {
	outline: none; border-color: var(--af2-brand); box-shadow: 0 0 0 4px rgba(107, 85, 255, .14);
}

/* Utility colors the templates use from the Tailwind build */
.af2-site .text-primary { color: var(--af2-brand-ink); }
.af2-site .bg-primary { background-color: var(--af2-ink); }
.af2-site .hover\:bg-primary-hover:hover { background-color: #2b2554; }

@media (prefers-reduced-motion: reduce) {
	.af2-site *, .af2-site *::before, .af2-site *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}