/* ============================================================
   Futuro article stylesheet — shared across all blog articles.

   Built from the per-article files (smith-article.css and
   nail-article.css were byte-identical for their first 1,438 lines;
   nail added 81 lines of component styles, kept here for every
   article to use).

   Link it absolutely so it survives articles moving between folders:
     <link rel="stylesheet" href="/assets/css/article.css">
   ============================================================ */

:root {
			--bg: #080810;
			--bg-card: #0f0f1a;
			--bg-surface: #13131f;
			--purple: #7c3aed;
			--purple-mid: #9d5ff5;
			--purple-light: #c4a8ff;
			--pink: #e879f9;
			--text: #e8e4f0;
			--text-muted: #8b82a7;
			--text-faint: #4a4464;
			--border: rgba(124, 58, 237, 0.18);
			--serif: 'DM Serif Display', Georgia, serif;
			--sans: 'DM Sans', system-ui, sans-serif;

			/* Aliases used by the component styles below. Previously undeclared, which
			   meant var(--card, #faf8f5) and var(--line, #e5e0d8) fell through to their
			   light-theme fallbacks and rendered white boxes on the dark page. */
			--card: #0f0f1a;
			--line: rgba(124, 58, 237, 0.18);
			--accent: #9d5ff5;
			--ink: #e8e4f0;
			--muted: #8b82a7
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0
		}

		html {
			scroll-behavior: smooth
		}

		body {
			background: var(--bg);
			color: var(--text);
			font-family: var(--sans);
			font-size: 18px;
			line-height: 1.8;
			-webkit-font-smoothing: antialiased;
			overflow-x: hidden
		}

		.skip-link {
			position: absolute;
			top: -60px;
			left: 50%;
			transform: translateX(-50%);
			background: var(--purple);
			color: #fff;
			padding: 10px 24px;
			border-radius: 0 0 8px 8px;
			font-size: 14px;
			font-weight: 500;
			text-decoration: none;
			z-index: 9999;
			transition: top .2s
		}

		.skip-link:focus {
			top: 0;
			outline: none
		}

		#progress-bar {
			position: fixed;
			top: 0;
			left: 0;
			height: 3px;
			width: 0%;
			background: linear-gradient(90deg, var(--purple), var(--pink));
			z-index: 1000;
			transition: width .1s linear
		}

		.breadcrumb {
			max-width: 780px;
			margin: 0 auto;
			padding: 20px 32px 0;
			font-size: 12px;
			color: var(--text-faint)
		}

		.breadcrumb ol {
			list-style: none;
			display: flex;
			align-items: center;
			gap: 8px;
			flex-wrap: wrap
		}

		.breadcrumb li {
			display: flex;
			align-items: center;
			gap: 8px
		}

		.breadcrumb li:not(:last-child)::after {
			content: '›';
			color: var(--text-faint);
			font-size: 14px
		}

		.breadcrumb a {
			color: var(--text-muted);
			text-decoration: none;
			transition: color .2s
		}

		.breadcrumb a:hover {
			color: var(--purple-light)
		}

		.breadcrumb [aria-current="page"] {
			color: var(--text-faint)
		}

		nav {
			position: sticky;
			top: 0;
			z-index: 100;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 18px 48px;
			background: rgba(8, 8, 16, .85);
			backdrop-filter: blur(16px);
			border-bottom: 1px solid var(--border)
		}

		.nav-logo img {
			height: 64px;
			width: auto;
			display: block
		}

		.nav-links {
			display: flex;
			gap: 32px;
			list-style: none
		}

		.nav-links a {
			color: var(--text-muted);
			text-decoration: none;
			font-size: 14px;
			font-weight: 500;
			letter-spacing: .04em;
			text-transform: uppercase;
			transition: color .2s
		}

		.nav-links a:hover {
			color: var(--purple-light)
		}

		.nav-hide-mobile {
			display: inline
		}

		.nav-cta-pink {
			background: linear-gradient(45deg, #ff4081, #f48fb1) !important;
			color: #fff !important;
			padding: 9px 22px !important;
			border: none !important;
			border-radius: 50px !important;
			text-transform: none !important;
			letter-spacing: 0 !important;
			font-size: 14px !important;
			font-weight: 600 !important;
			box-shadow: 0 0 20px rgba(232, 121, 249, .45) !important;
			transition: transform .3s ease, box-shadow .3s ease !important;
			white-space: nowrap
		}

		.nav-cta-pink:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 24px rgba(232, 121, 249, .6) !important;
			color: #fff !important
		}

		.back-to-directory {
			max-width: 880px;
			margin: 24px auto 0;
			padding: 0 32px
		}

		.back-to-directory a {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 13px;
			font-weight: 500;
			color: var(--text-muted);
			letter-spacing: .04em;
			text-decoration: none;
			transition: color .2s ease
		}

		.back-to-directory a:hover {
			color: var(--purple-light)
		}

		.back-to-directory a::before {
			content: '←';
			font-size: 14px
		}

		.post-hero {
			max-width: 780px;
			margin: 60px auto 0;
			padding: 0 32px 60px
		}

		.post-tag {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-size: 12px;
			font-weight: 500;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--purple-light);
			background: rgba(124, 58, 237, .12);
			border: 1px solid var(--border);
			padding: 6px 14px;
			border-radius: 20px;
			margin-bottom: 28px
		}

		.post-tag::before {
			content: '';
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: var(--purple-mid);
			animation: pulse 2s infinite
		}

		@keyframes pulse {
			0%, 100% { opacity: 1; transform: scale(1) }
			50% { opacity: .4; transform: scale(.7) }
		}

		h1.post-title {
			font-family: var(--serif);
			font-size: clamp(30px, 4.5vw, 50px);
			line-height: 1.15;
			color: #fff;
			margin-bottom: 24px;
			letter-spacing: -.02em
		}

		h1.post-title em {
			font-style: italic;
			color: var(--purple-light)
		}

		.post-subtitle {
			font-size: 20px;
			color: var(--text-muted);
			line-height: 1.6;
			margin-bottom: 40px;
			font-weight: 300
		}

		.post-meta {
			display: flex;
			align-items: center;
			gap: 20px;
			flex-wrap: wrap;
			font-size: 13px;
			color: var(--text-faint);
			padding-bottom: 40px;
			border-bottom: 1px solid var(--border)
		}

		.post-meta span {
			display: flex;
			align-items: center;
			gap: 6px
		}

		.author-block-top {
			max-width: 780px;
			margin: 0 auto 28px;
			padding: 0 32px
		}

		.author-block-inner {
			background: var(--bg-card);
			border: 1px solid var(--border);
			border-radius: 16px;
			padding: 20px 28px;
			display: flex;
			gap: 18px;
			align-items: center
		}

		.author-avatar-img {
			width: 56px;
			height: 56px;
			border-radius: 50%;
			object-fit: cover;
			flex-shrink: 0
		}

		.author-name {
			font-size: 16px;
			font-weight: 600;
			color: #fff;
			margin-bottom: 2px
		}

		.author-name a {
			color: inherit;
			text-decoration: none
		}

		.author-name a:hover {
			color: var(--purple-light)
		}

		.author-role {
			font-size: 13px;
			color: var(--purple-light);
			margin-bottom: 4px
		}

		.author-brief {
			font-size: 13px;
			color: var(--text-muted);
			line-height: 1.5
		}

		.answer-capsule {
			max-width: 780px;
			margin: 0 auto 28px;
			padding: 0 32px
		}

		.answer-capsule-inner {
			background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(232, 121, 249, .06));
			border: 1px solid rgba(124, 58, 237, .3);
			border-radius: 16px;
			padding: 28px 32px;
			position: relative
		}

		.answer-capsule-label {
			font-size: 11px;
			font-weight: 600;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--purple-light);
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			gap: 8px
		}

		.answer-capsule-label::before {
			content: '◆';
			font-size: 10px;
			color: var(--purple-mid)
		}

		.answer-capsule p {
			font-size: 17px;
			line-height: 1.7;
			color: var(--text);
			margin: 0
		}

		.answer-capsule mark {
			background: rgba(124, 58, 237, .25);
			color: var(--purple-light);
			padding: 2px 6px;
			border-radius: 4px;
			font-weight: 500
		}

		.pill-bar {
			max-width: 780px;
			margin: 0 auto 48px;
			padding: 0 32px;
			display: flex;
			flex-wrap: wrap;
			gap: 10px
		}

		.pill-bar a {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 13px;
			font-weight: 500;
			color: var(--text-muted);
			text-decoration: none;
			background: var(--bg-card);
			border: 1px solid var(--border);
			padding: 8px 16px;
			border-radius: 20px;
			transition: all .2s
		}

		.pill-bar a:hover {
			background: rgba(124, 58, 237, .15);
			border-color: rgba(124, 58, 237, .4);
			color: var(--purple-light);
			transform: translateY(-1px)
		}

		article.post-body {
			max-width: 780px;
			margin: 0 auto;
			padding: 0 32px 100px
		}

		article.post-body>p:first-of-type::first-letter {
			font-family: var(--serif);
			font-size: 4.5em;
			float: left;
			line-height: .75;
			padding-right: 12px;
			padding-top: 6px;
			color: var(--purple-mid)
		}

		article.post-body p {
			margin-bottom: 28px;
			color: var(--text);
			font-weight: 300
		}

		article.post-body ul {
			margin: 0 0 28px 24px;
			color: var(--text);
			font-weight: 300
		}

		article.post-body li {
			margin-bottom: 10px;
			line-height: 1.7
		}

		article.post-body a.inline-link {
			color: var(--purple-light);
			text-decoration: underline;
			text-decoration-color: rgba(196, 168, 255, .35);
			text-underline-offset: 3px;
			transition: color .2s, text-decoration-color .2s
		}

		article.post-body a.inline-link:hover {
			color: #fff;
			text-decoration-color: rgba(255, 255, 255, .5)
		}

		article.post-body h2 {
			font-family: var(--serif);
			font-size: clamp(22px, 3vw, 30px);
			color: #fff;
			margin: 56px 0 20px;
			letter-spacing: -.01em;
			display: flex;
			align-items: baseline;
			gap: 12px
		}

		.section-num {
			font-family: var(--sans);
			font-size: 13px;
			font-weight: 600;
			color: var(--purple-mid);
			letter-spacing: .04em;
			flex-shrink: 0
		}

		article.post-body h3 {
			font-size: 16px;
			font-weight: 500;
			letter-spacing: .06em;
			text-transform: uppercase;
			color: var(--purple-light);
			margin: 40px 0 14px
		}

		.lead-summary {
			background: rgba(124, 58, 237, .06);
			border-left: 3px solid var(--purple);
			border-radius: 0 10px 10px 0;
			padding: 20px 24px;
			margin: -8px 0 28px;
			font-size: 16px;
			line-height: 1.7;
			color: var(--text-muted)
		}

		.lead-summary p {
			margin: 0 !important
		}

		.lead-summary strong {
			color: var(--purple-light);
			font-weight: 500
		}

		.tldr-box {
			background: linear-gradient(135deg, rgba(124, 58, 237, .08), rgba(157, 95, 245, .03));
			border-left: 4px solid var(--purple);
			border-radius: 0 12px 12px 0;
			padding: 24px 32px;
			margin: 32px 0 48px
		}

		.tldr-label {
			font-family: var(--serif);
			font-size: 18px;
			color: var(--purple-light);
			margin-bottom: 12px;
			display: flex;
			align-items: center;
			gap: 8px
		}

		.tldr-box ul {
			margin: 0;
			padding-left: 20px
		}

		.tldr-box li {
			color: var(--text);
			margin-bottom: 8px;
			line-height: 1.6
		}

		.tldr-box li:last-child {
			margin-bottom: 0
		}

		.bestfor {
			margin: 6px 0 14px;
			padding: 12px 16px;
			border-left: 4px solid var(--purple-light);
			background: rgba(124, 58, 237, .06);
			border-radius: 10px;
			font-size: 15px;
			line-height: 1.6;
			color: var(--text-muted)
		}

		.bestfor strong {
			color: var(--purple-light)
		}

		.tradeoff {
			margin: 14px 0 4px;
			padding: 12px 16px;
			border-left: 4px solid #ffd98d;
			background: rgba(255, 217, 141, .07);
			border-radius: 10px;
			font-size: 15px;
			line-height: 1.6;
			color: var(--text-muted)
		}

		.tradeoff strong {
			color: #ffd98d
		}

		.pull-quote {
			margin: 48px 0;
			padding: 32px 36px;
			border-left: 3px solid var(--purple);
			background: var(--bg-surface);
			border-radius: 0 12px 12px 0;
			position: relative
		}

		.pull-quote::before {
			content: '"';
			font-family: var(--serif);
			font-size: 80px;
			color: var(--purple);
			opacity: .3;
			position: absolute;
			top: -10px;
			left: 16px;
			line-height: 1
		}

		.pull-quote p {
			font-family: var(--serif);
			font-size: 22px;
			line-height: 1.5;
			font-style: italic;
			color: var(--purple-light) !important;
			margin: 0 !important
		}

		.stat-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
			gap: 16px;
			margin: 40px 0
		}

		.stat-card {
			background: var(--bg-card);
			border: 1px solid var(--border);
			border-radius: 12px;
			padding: 24px 20px;
			text-align: center
		}

		.stat-card .stat-number {
			font-family: var(--serif);
			font-size: 36px;
			color: var(--purple-mid);
			display: block;
			margin-bottom: 6px
		}

		.stat-card .stat-label {
			font-size: 13px;
			color: var(--text-muted);
			line-height: 1.4
		}

		.geo-table {
			width: 100%;
			border-collapse: collapse;
			margin: 28px 0;
			font-size: 15px;
			background: var(--bg-card);
			border: 1px solid var(--border);
			border-radius: 12px;
			overflow: hidden
		}

		.geo-table thead {
			background: rgba(124, 58, 237, .15)
		}

		.geo-table th {
			padding: 14px 18px;
			text-align: left;
			font-size: 12px;
			font-weight: 600;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--purple-light);
			border-bottom: 1px solid var(--border)
		}

		.geo-table td {
			padding: 14px 18px;
			color: var(--text-muted);
			border-bottom: 1px solid rgba(124, 58, 237, .1);
			vertical-align: top
		}

		.geo-table tbody tr:last-child td {
			border-bottom: none
		}

		.geo-table td strong {
			color: var(--text);
			font-weight: 500
		}

		.geo-table .highlight {
			color: var(--purple-mid);
			font-weight: 600
		}

		mark {
			background: rgba(124, 58, 237, .2);
			color: var(--purple-light);
			padding: 1px 5px;
			border-radius: 3px
		}

		.verdict-box {
			background: linear-gradient(135deg, rgba(124, 58, 237, .1), rgba(232, 121, 249, .06));
			border: 1px solid rgba(124, 58, 237, .3);
			border-radius: 16px;
			padding: 36px;
			margin: 56px 0
		}

		.verdict-box h3 {
			font-family: var(--serif);
			font-size: 24px;
			color: #fff !important;
			letter-spacing: 0;
			text-transform: none !important;
			margin: 0 0 16px !important
		}

		.verdict-box p {
			color: var(--text-muted) !important;
			margin-bottom: 20px !important
		}

		.verdict-box p:last-child {
			margin-bottom: 0 !important
		}

		.cta-block {
			text-align: center;
			padding: 56px 32px;
			background: var(--bg-card);
			border-radius: 20px;
			border: 1px solid var(--border);
			margin: 60px 0 0
		}

		.cta-block h2 {
			font-family: var(--serif);
			font-size: 32px;
			color: #fff;
			margin-bottom: 12px
		}

		.cta-block p {
			color: var(--text-muted);
			margin-bottom: 28px;
			font-size: 17px
		}

		.cta-buttons {
			display: flex;
			gap: 16px;
			justify-content: center;
			flex-wrap: wrap
		}

		.btn-primary {
			display: inline-block;
			background: linear-gradient(135deg, var(--purple), var(--purple-mid));
			color: #fff;
			text-decoration: none;
			padding: 14px 36px;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 500;
			letter-spacing: .02em;
			transition: transform .2s, box-shadow .2s;
			box-shadow: 0 4px 24px rgba(124, 58, 237, .35)
		}

		.btn-primary:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 36px rgba(124, 58, 237, .5)
		}

		.btn-outline {
			display: inline-block;
			background: transparent;
			border: 1px solid var(--border);
			color: var(--text-muted);
			text-decoration: none;
			padding: 14px 36px;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 400;
			transition: border-color .2s, color .2s
		}

		.btn-outline:hover {
			border-color: var(--purple);
			color: var(--purple-light)
		}

		.image-placeholder {
			background: var(--bg-card);
			border: 1px dashed rgba(124, 58, 237, .45);
			border-radius: 12px;
			padding: 40px 32px;
			margin: 32px 0;
			text-align: center
		}

		.image-placeholder .img-desc {
			font-size: 14px;
			color: var(--text-muted);
			font-style: italic
		}

		.image-placeholder .img-label {
			font-size: 11px;
			font-weight: 600;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--purple-light);
			margin-bottom: 12px
		}

		figure.post-figure {
			margin: 36px 0;
			border-radius: 12px;
			overflow: hidden;
			border: 1px solid var(--border);
			background: var(--bg-card)
		}

		figure.post-figure img {
			display: block;
			width: 100%;
			height: auto
		}

		figure.post-figure figcaption {
			font-size: 13px;
			color: var(--text-muted);
			font-style: italic;
			padding: 12px 18px;
			text-align: center;
			line-height: 1.5
		}

		.author-bio {
			max-width: 780px;
			margin: 0 auto 60px;
			padding: 0 32px
		}

		.author-bio-inner {
			background: var(--bg-card);
			border: 1px solid var(--border);
			border-radius: 16px;
			padding: 28px 32px;
			display: flex;
			gap: 20px;
			align-items: flex-start
		}

		.author-avatar {
			width: 64px;
			height: 64px;
			border-radius: 50%;
			background: linear-gradient(135deg, var(--purple), var(--pink));
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: var(--serif);
			font-size: 28px;
			color: #fff;
			flex-shrink: 0
		}

		.author-info h4 {
			font-size: 16px;
			font-weight: 600;
			color: #fff;
			margin-bottom: 4px
		}

		.author-info .author-title {
			font-size: 13px;
			color: var(--purple-light);
			margin-bottom: 8px
		}

		.author-info p {
			font-size: 14px;
			color: var(--text-muted);
			line-height: 1.6;
			margin: 0 !important
		}

		.return-policy {
			max-width: 780px;
			margin: 0 auto 40px;
			padding: 0 32px
		}

		.return-policy-inner {
			background: rgba(124, 58, 237, .04);
			border: 1px solid var(--border);
			border-radius: 12px;
			padding: 20px 24px;
			font-size: 14px;
			color: var(--text-muted)
		}

		.return-policy-inner strong {
			color: var(--purple-light)
		}

		.faq-section {
			max-width: 780px;
			margin: 0 auto;
			padding: 0 32px 80px
		}

		.faq-section-header {
			text-align: center;
			margin-bottom: 48px
		}

		.faq-section-header h2 {
			font-family: var(--serif);
			font-size: clamp(26px, 4vw, 36px);
			color: #fff;
			margin-bottom: 12px
		}

		.faq-section-header>p {
			color: var(--text-muted);
			font-size: 17px;
			max-width: 560px;
			margin: 0 auto
		}

		.faq-item {
			background: var(--bg-card);
			border: 1px solid var(--border);
			border-radius: 14px;
			margin-bottom: 16px;
			overflow: hidden;
			transition: border-color .2s, box-shadow .2s
		}

		.faq-item:hover {
			border-color: rgba(124, 58, 237, .35)
		}

		.faq-question {
			width: 100%;
			background: none;
			border: none;
			padding: 22px 28px;
			font-family: var(--sans);
			font-size: 16px;
			font-weight: 500;
			color: var(--text);
			text-align: left;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			transition: color .2s
		}

		.faq-question:hover {
			color: var(--purple-light)
		}

		.faq-question::after {
			content: '+';
			font-size: 22px;
			color: var(--purple-mid);
			flex-shrink: 0;
			transition: transform .2s
		}

		.faq-item.open .faq-question::after {
			transform: rotate(45deg)
		}

		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height .3s ease, padding .3s ease
		}

		.faq-item.open .faq-answer {
			max-height: 1200px
		}

		.faq-answer-inner {
			padding: 0 28px 24px
		}

		.faq-answer .lead {
			font-size: 16px;
			line-height: 1.65;
			color: var(--text);
			margin-bottom: 16px;
			padding-bottom: 16px;
			border-bottom: 1px solid var(--border)
		}

		.faq-answer .lead p {
			margin: 0 !important
		}

		.faq-answer>.faq-answer-inner>p {
			color: var(--text-muted);
			font-size: 15px;
			line-height: 1.7;
			margin-bottom: 14px !important
		}

		.faq-utilities {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-top: 16px;
			padding-top: 14px;
			border-top: 1px solid rgba(124, 58, 237, .1)
		}

		.faq-utilities button {
			background: none;
			border: 1px solid var(--border);
			border-radius: 8px;
			color: var(--text-faint);
			font-family: var(--sans);
			font-size: 12px;
			font-weight: 500;
			padding: 6px 12px;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			gap: 6px;
			transition: all .2s
		}

		.faq-utilities button:hover {
			border-color: rgba(124, 58, 237, .4);
			color: var(--purple-light)
		}

		.faq-utilities .helpful-label {
			font-size: 12px;
			color: var(--text-faint);
			margin-left: auto
		}

		#toast {
			position: fixed;
			bottom: 32px;
			left: 50%;
			transform: translateX(-50%) translateY(80px);
			background: var(--bg-surface);
			border: 1px solid rgba(124, 58, 237, .4);
			color: var(--text);
			font-size: 14px;
			padding: 12px 24px;
			border-radius: 10px;
			z-index: 2000;
			opacity: 0;
			transition: transform .3s ease, opacity .3s ease;
			pointer-events: none
		}

		#toast.show {
			transform: translateX(-50%) translateY(0);
			opacity: 1
		}

		.site-footer {
			border-top: 1px solid var(--border);
			background: var(--bg-card);
			padding: 48px
		}

		.footer-grid {
			max-width: 1100px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1.5fr 1fr 1fr 1fr;
			gap: 40px
		}

		.footer-brand img {
			height: 28px;
			width: auto;
			margin-bottom: 12px
		}

		.footer-brand p {
			font-size: 13px;
			color: var(--text-muted);
			line-height: 1.6
		}

		.footer-col h4 {
			font-size: 12px;
			font-weight: 600;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--purple-light);
			margin-bottom: 16px
		}

		.footer-col ul {
			list-style: none
		}

		.footer-col li {
			margin-bottom: 10px
		}

		.footer-col a {
			font-size: 14px;
			color: var(--text-muted);
			text-decoration: none;
			transition: color .2s
		}

		.footer-col a:hover {
			color: var(--purple-light)
		}

		.footer-bottom {
			max-width: 1100px;
			margin: 32px auto 0;
			padding-top: 24px;
			border-top: 1px solid var(--border);
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			gap: 12px
		}

		.footer-bottom p {
			font-size: 12px;
			color: var(--text-faint)
		}

		.footer-bottom-links {
			display: flex;
			gap: 20px
		}

		.footer-bottom-links a {
			font-size: 12px;
			color: var(--text-faint);
			text-decoration: none;
			transition: color .2s
		}

		.footer-bottom-links a:hover {
			color: var(--text-muted)
		}

		@media(max-width:768px) {
			.footer-grid {
				grid-template-columns: 1fr 1fr
			}

			.footer-bottom {
				flex-direction: column;
				text-align: center
			}
		}

		@media(max-width:480px) {
			.footer-grid {
				grid-template-columns: 1fr
			}
		}

		@media(max-width:680px) {
			nav {
				padding: 14px
			}

			.nav-links {
				display: flex;
				gap: 12px;
				align-items: center
			}

			.nav-links a {
				white-space: nowrap
			}

			.nav-hide-mobile {
				display: none
			}

			.nav-links a:not(.nav-cta-pink) {
				font-size: 12px;
				padding: 4px 6px
			}

			.nav-cta-pink {
				padding: 7px 12px !important;
				font-size: 12px !important
			}

			.post-hero,
			article.post-body,
			.breadcrumb,
			.answer-capsule,
			.pill-bar,
			.back-to-directory,
			.faq-section,
			.author-bio,
			.author-block-top,
			.return-policy {
				padding-left: 20px;
				padding-right: 20px
			}

			.author-bio-inner,
			.author-block-inner {
				flex-direction: column;
				text-align: center
			}

			.author-avatar,
			.author-avatar-img {
				margin: 0 auto
			}

			.pill-bar {
				gap: 8px
			}

			.pill-bar a {
				font-size: 12px;
				padding: 6px 12px
			}

			.site-footer {
				padding: 32px 20px
			}
		}

		.fade-in {
			opacity: 0;
			transform: translateY(24px);
			transition: opacity .6s ease, transform .6s ease
		}

		.fade-in.visible {
			opacity: 1;
			transform: none
		}

		@media print {
			.skip-link,
			nav,
			.back-to-directory,
			.pill-bar,
			.breadcrumb,
			.cta-block,
			.site-footer,
			.faq-utilities,
			#progress-bar,
			.return-policy,
			.author-bio,
			.author-block-top {
				display: none !important
			}

			body {
				background: #fff;
				color: #000;
				font-size: 12pt
			}

			article.post-body {
				max-width: 100%;
				padding: 0
			}

			h1.post-title {
				font-size: 24pt
			}

			article.post-body h2 {
				font-size: 16pt;
				break-after: avoid
			}

			.faq-item {
				break-inside: avoid;
				border: 1px solid #ccc
			}

			.faq-answer {
				max-height: none !important
			}

			.answer-capsule {
				border: 1px solid #999;
				background: #f5f5f5
			}

			a {
				text-decoration: none;
				color: #000
			}

			.stat-grid,
			.verdict-box {
				page-break-inside: avoid
			}
		}

		.geo-table th.sortable { cursor: pointer; user-select: none }
		.geo-table th.sortable:hover { color: #fff }
		.geo-table th.sortable::after { content: ' ⇅'; opacity: .5; font-size: 11px }
		.update-block { background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.35); border-radius: 12px; padding: 18px 24px; margin: 32px 0; font-size: 14px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 24px }
		.update-block strong { color: var(--purple-light) }
		.stamp { display:inline-block; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); border:1px solid var(--border); border-radius:6px; padding:3px 10px; margin-bottom:10px }
		.calc { background: var(--bg-card); border:1px solid rgba(124,58,237,.35); border-radius:16px; padding:32px; margin:36px 0 }
		.calc label { display:block; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--purple-light); margin:20px 0 8px }
		.calc input[type=range] { width:100%; accent-color: var(--purple); height:6px }
		.calc .calc-val { font-family:var(--serif); font-size:22px; color:#fff }
		.calc-out { margin-top:24px }
		.calc-out .geo-table td { font-size:14px }
		.calc-note { font-size:13px; color:var(--text-muted); margin-top:14px; font-style:italic }
		.winner { color: var(--pink); font-weight:600 }
		.stack { display:flex; flex-direction:column }
		.stack .post-hero { order:1; margin-top:24px }
		.stack .author-block-top { order:2 }
		.stack .answer-capsule { order:3 }
		.stack .tldr-stack { order:4; max-width:780px; margin:0 auto; padding:0 32px; width:100% }
		.stack .pill-bar { order:5 }

		/* Only the main site nav sticks; breadcrumb/pill-bar/TOC are <nav> too and
		   were inheriting position:sticky from the bare selector. Reset them. */
		nav.breadcrumb,
		nav.pill-bar,
		nav.toc-box {
			position: static;
			top: auto;
		}
	
		/* Mobile: nothing but the nav may stick — prevents topic lists overlapping the menu bar */
		@media(max-width:768px) {
			.toc-box, .pill-bar, .author-block-top, .stack > * { position: static !important; top: auto !important; z-index: auto !important }
		}

		/* Interactive annual-cost modeler */
		.modeler {
			max-width: 780px; margin: 40px auto; padding: 32px;
			background: linear-gradient(180deg, rgba(124,58,237,.10), rgba(8,8,16,.6));
			border: 1px solid var(--border); border-radius: 18px
		}
		.modeler h3 { margin: 0 0 6px; color: #fff; font-family: var(--serif); font-size: 22px }
		.modeler .modeler-sub { color: var(--muted); font-size: 14px; margin: 0 0 24px }
		.slider-row { margin: 0 0 22px }
		.slider-row label { display: flex; justify-content: space-between; color: #e9e4f5; font-size: 14px; font-weight: 600; margin-bottom: 8px }
		.slider-row label output { color: var(--pink, #e879f9); font-variant-numeric: tabular-nums }
		.slider-row input[type=range] { width: 100%; accent-color: #7c3aed; height: 6px }
		.surge-toggle { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #e9e4f5; font-size: 14px }
		.modeler-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
		@media(max-width:680px) { .modeler-grid { grid-template-columns: 1fr } }
		.model-card { background: rgba(8,8,16,.7); border: 1px solid var(--border); border-radius: 14px; padding: 20px }
		.model-card h4 { margin: 0 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em }
		.model-card.permin h4 { color: #f0abfc }
		.model-card.flat h4 { color: #a78bfa }
		.model-card .big { font-family: var(--serif); font-size: 34px; color: #fff; margin: 6px 0 2px; font-variant-numeric: tabular-nums }
		.model-card .per { color: var(--muted); font-size: 13px; margin: 0 0 12px }
		.model-card ul { margin: 0; padding: 0 0 0 18px; color: #cfc8e3; font-size: 13px; line-height: 1.7 }
		.model-verdict { margin: 20px 0 0; padding: 14px 18px; border-radius: 12px; background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.4); color: #f3edff; font-size: 14px }
		.model-note { color: var(--muted); font-size: 12px; margin: 14px 0 0 }

	
		/* Definition block + key takeaways (content-at-top pattern) */
		.definition-block {
			max-width: 780px; margin: 0 auto 36px; padding: 28px 32px;
			background: rgba(124,58,237,.08); border: 1px solid var(--border);
			border-left: 4px solid var(--purple-mid); border-radius: 14px
		}
		.definition-block .def-label {
			font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
			color: var(--purple-mid); font-weight: 700; margin-bottom: 10px
		}
		.definition-block p { margin: 0; color: #e9e4f5; font-size: 17px; line-height: 1.7 }
		.key-takeaways {
			max-width: 780px; margin: 0 auto 36px; padding: 28px 32px;
			background: linear-gradient(180deg, rgba(232,121,249,.10), rgba(124,58,237,.06));
			border: 1px solid rgba(232,121,249,.35); border-radius: 14px
		}
		.key-takeaways .kt-label {
			font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
			color: var(--pink, #e879f9); font-weight: 700; margin-bottom: 12px
		}
		.key-takeaways ul { margin: 0; padding: 0 0 0 20px; color: #e9e4f5; line-height: 1.8; font-size: 16px }
		.key-takeaways li { margin-bottom: 8px }

	
		.stack .key-takeaways { order:4 }
		/* Related reading + sources cited styling */
		.related-reading { max-width: 780px; margin: 48px auto 0; padding: 28px 32px; border-top: 1px solid var(--border) }
		.related-reading h3 { font-family: var(--serif); font-size: 20px; color: #fff; margin: 0 0 16px }
		.related-reading ul { margin: 0; padding: 0; list-style: none }
		.related-reading li { margin: 0 0 12px }
		.related-reading a { color: #c4b5fd; text-decoration: none; font-size: 16px; line-height: 1.5; border-bottom: 1px solid rgba(196,181,253,.3) }
		.related-reading a:hover { color: #fff; border-bottom-color: #fff }
		.sources-cited { max-width: 780px; margin: 48px auto 0; padding: 28px 32px 0; }
		.sources-cited h2 { font-family: var(--serif); font-size: 24px; color: #fff; margin: 0 0 16px }
		.ref-list { color: #cfc8e3; font-size: 15px; line-height: 1.9; padding-left: 22px }
		.ref-list a { color: #c4b5fd }

	.cta-sub { color: var(--muted, #9a93b3); font-size: 13px; margin: 14px 0 0 }

/* ============================================================
   PHASE 6C.2 — SOURCE-FIRST FAQ
   Source order: .stack answer layer, then the full FAQ, then the
   article flow. Flex order restores the published visual sequence
   (article first, FAQ in its normal position). Identical content
   shown to all users and all crawlers. No hidden elements.
   ============================================================ */
main { display: flex; flex-direction: column }
main > .stack { order: 1 }
main > .content-flow { order: 2 }
main > .faq-section { order: 3 }
main > .verdict-box { order: 4 }
main > .cta-block { order: 5 }
main > .author-bio-bottom { order: 6 }
main > .return-policy { order: 7 }
main > .sources-cited { order: 8 }
main > .related-reading { order: 9 }
main > .footer-grid { order: 10 }
main > .footer-legal { order: 11 }

/* Brief 24 additions — pricing modeler + utility classes */
.modeler-row { margin: 0 0 20px }
.modeler-row label { display: block; color: var(--ink); font-size: 14px; font-weight: 600; margin-bottom: 8px }
.modeler-row output { color: var(--accent); font-weight: 700 }
.modeler-row input[type="range"] { width: 100%; accent-color: var(--accent) }
.modeler-card { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 14px; padding: 18px }
.modeler-card h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px }
.modeler-card p { margin: 8px 0 0; font-size: 12px; color: var(--muted) }
.modeler-num { font-size: 30px; font-weight: 800; color: #fff; font-family: var(--serif) }
.modeler-card-accent { border-color: var(--accent); background: rgba(124,58,237,.14) }
.modeler-note { margin-top: 18px; font-size: 12px; color: var(--muted) }
.table-scroll { overflow-x: auto; margin: 24px 0 }
.table-scroll table { width: 100%; border-collapse: collapse; min-width: 640px }
.table-scroll th, .table-scroll td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: top }
.table-scroll th { color: #fff; font-weight: 700; border-bottom: 2px solid var(--accent) }
.table-scroll td { color: var(--ink) }
.disclosure, .who-for { font-size: 14px; color: var(--muted); border-left: 3px solid var(--accent); padding: 10px 16px; margin: 0 0 16px; background: rgba(124,58,237,.06); border-radius: 0 10px 10px 0 }
.citable-facts { border: 1px solid var(--border); border-radius: 14px; padding: 24px 28px; margin: 40px 0; background: rgba(255,255,255,.03) }
.citable-facts h2 { margin-top: 0 }
.refresh-log { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 20px; font-size: 13px; color: var(--muted) }

/* Brief 24: no drop cap on disclosure/who-for lead-ins */
article.post-body > p.disclosure:first-of-type::first-letter, article.post-body > p.who-for::first-letter { float: none; font-size: inherit; line-height: inherit; padding: 0; margin: 0; color: inherit; font-family: inherit; font-weight: inherit }


/* ===== Nail-salon article: competitor-format additions ===== */

/* Evidence-level banner (radical transparency, placed after lede) */
.evidence-banner {
	border: 1px solid var(--line, #e5e0d8);
	border-left: 4px solid var(--accent, #8b5cf6);
	background: rgba(139, 92, 246, 0.06);
	border-radius: 10px;
	padding: 20px 22px;
	margin: 28px 0 36px;
}
.evidence-banner .ev-label {
	font-family: var(--sans, 'DM Sans', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent, #8b5cf6);
	margin: 0 0 8px;
}
.evidence-banner p { margin: 0 0 10px; font-size: 0.98rem; }
.evidence-banner p:last-child { margin-bottom: 0; }
.evidence-banner ul { margin: 6px 0 10px 20px; font-size: 0.95rem; }
.evidence-banner li { margin-bottom: 5px; }

/* Bottom-line answer blocks (directly under query-phrased H2s) */
.bottom-line {
	border: 1px solid var(--line, #e5e0d8);
	background: var(--card, #faf8f5);
	border-radius: 10px;
	padding: 18px 22px;
	margin: 18px 0 30px;
}
.bottom-line .bl-label {
	font-family: var(--sans, 'DM Sans', sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent, #8b5cf6);
	margin: 0 0 6px;
}
.bottom-line p { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.bottom-line p + p { margin-top: 8px; }

/* Per-row verified date badges in comparison tables */
.verified-date {
	display: block;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #6b7280;
	margin-top: 3px;
	font-style: normal;
}

/* Segmented recommendation cards */
.rec-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 22px 0 34px;
}
.rec-card {
	border: 1px solid var(--line, #e5e0d8);
	border-radius: 10px;
	padding: 16px 20px;
	background: var(--card, #faf8f5);
}
.rec-card .rec-who {
	font-weight: 600;
	font-size: 0.98rem;
	margin: 0 0 4px;
}
.rec-card .rec-pick {
	margin: 0;
	font-size: 0.95rem;
}
.rec-card .rec-pick strong { color: var(--accent, #8b5cf6); }


/* ============================================================
   INDUSTRY VERTICAL PAGES
   Structure is fixed across verticals; only the vertical noun,
   the category guardrail line, and the media change.
   ============================================================ */

.vert-hero {
	max-width: 1100px;
	margin: 0 auto;
	padding: 56px 32px 40px;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 48px;
	align-items: center;
}
@media (max-width: 900px) {
	.vert-hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 28px }
}
.vert-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--purple-light);
	background: rgba(124,58,237,.12); border: 1px solid var(--border);
	padding: 6px 14px; border-radius: 20px; margin-bottom: 20px;
}
.vert-hero h1 {
	font-family: var(--serif);
	font-size: clamp(32px, 4.6vw, 52px);
	line-height: 1.1; color: #fff; margin: 0 0 18px; letter-spacing: -.02em;
}
.vert-lede {
	font-size: 19px; line-height: 1.6; color: var(--text); font-weight: 300; margin: 0 0 28px;
}
.vert-lede strong { color: var(--purple-light); font-weight: 500 }

.vert-proof { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px }
.vert-proof span {
	font-size: 13px; font-weight: 500; color: var(--text);
	background: var(--bg-card); border: 1px solid var(--border);
	padding: 9px 16px; border-radius: 10px;
}
.vert-proof b { color: var(--purple-mid); font-weight: 700 }

.vert-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center }
.vert-call {
	display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
	background: linear-gradient(135deg, var(--purple), var(--purple-mid));
	color: #fff; text-decoration: none; padding: 16px 30px; border-radius: 10px;
	font-size: 17px; font-weight: 600; letter-spacing: .01em;
	box-shadow: 0 4px 24px rgba(124,58,237,.35);
	transition: transform .2s, box-shadow .2s;
}
.vert-call:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(124,58,237,.5) }
.vert-call small { display: block; font-size: 13px; font-weight: 400; opacity: .9; letter-spacing: 0 }
.vert-cta-note { font-size: 13px; color: var(--text-muted); width: 100%; margin-top: 4px }

/* Media placeholder — swap for Gamma stills, branded video, or MP4 loops */
.media-slot {
	background: var(--bg-card);
	border: 1px dashed rgba(124,58,237,.45);
	border-radius: 16px;
	padding: 34px 28px;
	text-align: center;
	margin: 32px 0;
}
.media-slot .ms-label {
	font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--purple-light); margin-bottom: 10px;
}
.media-slot .ms-desc { font-size: 14px; color: var(--text-muted); font-style: italic; margin: 0 }
.vert-hero .media-slot { margin: 0; min-height: 300px; display: flex; flex-direction: column; justify-content: center }

.vert-section { max-width: 860px; margin: 0 auto; padding: 0 32px }
@media (max-width: 680px) { .vert-section { padding: 0 20px } }
.vert-section h2 {
	font-family: var(--serif); font-size: clamp(24px, 3.2vw, 34px);
	color: #fff; margin: 64px 0 18px; letter-spacing: -.01em;
}
.vert-section h3 {
	font-size: 16px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
	color: var(--purple-light); margin: 34px 0 12px;
}
.vert-section p { font-size: 17px; line-height: 1.75; color: var(--text); font-weight: 300; margin: 0 0 22px }
.vert-section ul { margin: 0 0 22px 22px; color: var(--text); font-weight: 300 }
.vert-section li { margin-bottom: 10px; line-height: 1.7 }
.vert-section a { color: var(--purple-light); text-decoration: underline; text-underline-offset: 3px }
.vert-section a:hover { color: #fff }

.guardrail {
	background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(232,121,249,.06));
	border: 1px solid rgba(124,58,237,.38);
	border-left: 5px solid var(--purple-mid);
	border-radius: 0 16px 16px 0;
	padding: 30px 34px; margin: 30px 0;
}
.guardrail .gr-label {
	font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--purple-light); margin-bottom: 12px;
}
.guardrail p { font-size: 18px; line-height: 1.7; color: #f2eefb; margin: 0 0 14px }
.guardrail p:last-child { margin-bottom: 0 }

.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 18px; margin: 28px 0 }
.tech-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 26px }
.tech-card h3 { margin: 0 0 10px; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--purple-light) }
.tech-card p { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin: 0 }
.tech-card a { color: var(--purple-light) }

.limits-box {
	background: rgba(255,217,141,.06);
	border: 1px solid rgba(255,217,141,.3);
	border-left: 4px solid #ffd98d;
	border-radius: 0 12px 12px 0;
	padding: 24px 28px; margin: 32px 0;
}
.limits-box .lb-label {
	font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: #ffd98d; margin-bottom: 10px;
}
.limits-box p { font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0 0 12px }
.limits-box p:last-child { margin-bottom: 0 }