/*
 * Visual system ported from the BOLT reference project
 * (project-bolt-sb1-3ze2mx8b). Design tokens and component styles below are
 * translated 1:1 from that project's tailwind.config.js / index.css /
 * component source -- values are not estimated from the screenshot, they
 * are copied from the BOLT source where the source and the screenshot agree.
 *
 * Scope: global site chrome (header/footer, loaded on every page) plus the
 * front-page-only sections (hero, trust bar, checker, content sections),
 * enqueued only via is_front_page() so blog/single/archive templates are
 * never touched by this file. See functions.php for the enqueue split.
 */

:root {
	--bolt-brand: #FDD000;
	--bolt-brand-dark: #C9A500;
	--bolt-brand-darker: #8A7000;
	--bolt-ink: #111111;
	--bolt-ink-muted: #626262;
	--bolt-charcoal: #3A3A3A;
	--bolt-surface: #FFFFFF;
	--bolt-surface-soft: #F7F7F4;
	--bolt-line: #D9D9D5;
	--bolt-success: #0F7A3D;
	--bolt-success-bg: #EAF7EF;
	--bolt-success-border: #BCE6CC;
	--bolt-info: #1D5FAE;
	--bolt-info-bg: #EBF3FC;
	--bolt-info-border: #BFD9F4;
	--bolt-warning: #B45309;
	--bolt-warning-bg: #FEF3E7;
	--bolt-warning-border: #F6D6AE;
	--bolt-danger: #C22C2C;
	--bolt-danger-bg: #FBEAEA;
	--bolt-danger-border: #F0C2C2;
	--bolt-unknown: #55606B;
	--bolt-unknown-bg: #EEF0F2;
	--bolt-unknown-border: #D7DBDF;
	--bolt-radius: 6px;
	--bolt-radius-panel: 8px;
	--bolt-content-max: 1120px;
	/* System-font stack only -- no webfont download. Hiragino Sans (Mac) and
	   Yu Gothic/Meiryo (Windows) already render this face closely enough
	   that adding a Noto Sans JP webfont would cost real FOIT/FOUT and
	   payload for a difference not worth it; see final report §11. */
	--bolt-font: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Yu Gothic UI", Meiryo, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
}

.hontoko-icon--xs { width: 14px; height: 14px; stroke-width: 2.2; }
.hontoko-icon--sm { width: 16px; height: 16px; stroke-width: 2.1; }
/* tool-ui.css's base .hontoko-icon{color:var(--color-brand)} makes every
   icon amber by default (stroke="currentColor" in the SVG markup itself).
   That's invisible against these same-colored yellow button backgrounds,
   so every icon placed on a yellow fill needs an explicit override here. */
.bolt-btn-primary .hontoko-icon,
.button-primary-run .hontoko-icon,
.bolt-pricing-cta .hontoko-icon,
.mobile-cta .hontoko-icon,
.header-cta .hontoko-icon { color: var(--bolt-ink); }

.bolt-shell {
	width: 100%;
	max-width: var(--bolt-content-max);
	margin-inline: auto;
	padding-inline: 16px;
}
@media (min-width: 640px) {
	.bolt-shell { padding-inline: 24px; }
}

/* ============ Header ============ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--bolt-line);
	font-family: var(--bolt-font);
}
.site-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	gap: 16px;
}
.site-header .brand { display: flex; align-items: center; gap: 8px; }
.site-header .brand-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--bolt-ink);
}
.site-header .brand-logo-svg { height: 45px; width: auto; display: block; }
.site-header .primary-nav {
	display: none;
	align-items: center;
	gap: 28px;
}
.site-header .primary-nav a {
	font-size: 14px;
	font-weight: 500;
	color: var(--bolt-ink-muted);
	text-decoration: none;
	transition: color .15s ease;
}
.site-header .primary-nav a:hover { color: var(--bolt-ink); }
.site-header .header-cta {
	display: none;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 20px;
	border-radius: var(--bolt-radius);
	background: var(--bolt-brand);
	color: var(--bolt-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s ease;
	white-space: nowrap;
}
.site-header .header-cta:hover { background: var(--bolt-brand-dark); }
.site-header .menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	background: none;
	color: var(--bolt-ink);
	cursor: pointer;
}
.site-header .menu-toggle .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-header .menu-toggle .menu-icon { width: 24px; height: 24px; }
.site-header .menu-toggle .menu-icon-close { display: none; }
.site-header .menu-toggle.is-open .menu-icon-open { display: none; }
.site-header .menu-toggle.is-open .menu-icon-close { display: block; }
@media (min-width: 1024px) {
	.site-header .primary-nav { display: flex; }
	.site-header .header-cta { display: inline-flex; }
	.site-header .menu-toggle { display: none; }
}
.site-header .mobile-nav {
	border-top: 1px solid var(--bolt-line);
	background: var(--bolt-surface);
}
.site-header .mobile-nav[hidden] { display: none; }
.site-header .mobile-nav-list {
	display: flex;
	flex-direction: column;
	padding: 8px 16px;
}
.site-header .mobile-nav-list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	border-bottom: 1px solid rgba(217, 217, 213, .7);
	font-size: 15px;
	font-weight: 500;
	color: var(--bolt-ink);
	text-decoration: none;
}
.site-header .mobile-nav-list a:last-of-type { border-bottom: none; }
.site-header .mobile-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	margin: 12px 0;
	border-radius: var(--bolt-radius);
	background: var(--bolt-brand);
	font-size: 14px;
	font-weight: 700;
	color: var(--bolt-ink);
	text-decoration: none;
}

/* ============ Footer ============ */
.site-footer {
	border-top: 1px solid var(--bolt-line);
	background: var(--bolt-surface-soft);
	font-family: var(--bolt-font);
}
.site-footer .footer-inner { padding-block: 32px; }
.site-footer .footer-top {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}
@media (min-width: 640px) {
	.site-footer .footer-top { flex-direction: row; }
}
.site-footer .brand-logo--footer {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	color: var(--bolt-ink);
	text-decoration: none;
}
.site-footer .brand-logo--footer .brand-logo-svg {
	height: 36px;
	width: auto;
	display: block;
}
.site-footer .footer-tagline {
	margin-top: 12px;
	max-width: 26em;
	font-size: 12px;
	line-height: 1.7;
	color: var(--bolt-ink-muted);
}
.site-footer .footer-nav {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 8px;
	font-size: 12px;
	color: var(--bolt-ink-muted);
}
.site-footer .footer-nav a { color: inherit; text-decoration: none; }
.site-footer .footer-nav a:hover { color: var(--bolt-ink); }
.site-footer .footer-bottom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 16px;
	row-gap: 6px;
	margin-top: 32px;
	padding-top: 16px;
	border-top: 1px solid var(--bolt-line);
	font-size: 11px;
	color: var(--bolt-ink-muted);
}
.site-footer .footer-bottom .footer-note-inline {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.site-footer .footer-bottom svg { width: 14px; height: 14px; }

/* ============ Hero ============ */
.bolt-hero { border-bottom: 1px solid var(--bolt-line); background: var(--bolt-surface); font-family: var(--bolt-font); }
.bolt-hero .bolt-shell { padding-block: 48px; }
@media (min-width: 640px) { .bolt-hero .bolt-shell { padding-block: 64px; } }
@media (min-width: 1024px) { .bolt-hero .bolt-shell { padding-block: 80px; } }
.bolt-hero-grid {
	display: grid;
	gap: 40px;
	align-items: center;
}
@media (min-width: 1024px) {
	.bolt-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; }
}
.bolt-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--bolt-surface-soft);
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bolt-ink-muted);
	box-shadow: inset 0 0 0 1px var(--bolt-line);
}
.bolt-hero h1 {
	margin: 20px 0 0;
	font-size: 42px;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--bolt-ink);
}
@media (min-width: 640px) { .bolt-hero h1 { font-size: 52px; } }
@media (min-width: 1024px) { .bolt-hero h1 { font-size: 60px; } }
.bolt-hero-lead {
	margin: 20px 0 0;
	max-width: 46ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--bolt-ink-muted);
}
.bolt-hero .hero-source-note {
	margin: 10px 0 0;
	max-width: 46ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--bolt-ink-muted);
}
.hero-cta-icon { margin-left: 2px; }
.bolt-hero-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 32px;
}
@media (min-width: 640px) { .bolt-hero-actions { flex-direction: row; align-items: center; } }
.bolt-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	border-radius: var(--bolt-radius);
	background: var(--bolt-brand);
	padding: 0 28px;
	font-size: 15px;
	font-weight: 700;
	color: var(--bolt-ink);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.bolt-btn-primary:hover { background: var(--bolt-brand-dark); }
.bolt-btn-primary svg { width: 16px; height: 16px; }
.bolt-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 16px;
	border-radius: var(--bolt-radius);
	font-size: 15px;
	font-weight: 500;
	color: var(--bolt-ink-muted);
	text-decoration: none;
	background: none;
	border: none;
}
.bolt-btn-ghost:hover { color: var(--bolt-ink); }
.bolt-hero-preview {
	border-radius: var(--bolt-radius-panel);
	border: 1px solid var(--bolt-line);
	background: var(--bolt-surface-soft);
	padding: 16px;
}
@media (min-width: 640px) { .bolt-hero-preview { padding: 20px; } }
.bolt-hero-preview-label { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--bolt-ink-muted); }
.bolt-hero-preview-cards { display: flex; flex-direction: column; gap: 12px; }
.bolt-hero-preview-card {
	border-radius: var(--bolt-radius-panel);
	border: 1px solid var(--bolt-line);
	background: var(--bolt-surface);
	padding: 14px;
}
.bolt-hero-preview-card.is-review { border-color: var(--bolt-warning-border); }
.bolt-hero-preview-card.is-ok { border-color: var(--bolt-success-border); }
.bolt-hero-preview-row { display: flex; align-items: center; justify-content: space-between; }
.bolt-hero-preview-caption { font-size: 12px; font-weight: 500; color: var(--bolt-ink-muted); }
.bolt-hero-preview-address { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--bolt-ink); }
.bolt-hero-preview-candidate { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bolt-line); }

/* ============ Status badge (shared: hero preview + checker results) ============ */
.bolt-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: var(--bolt-radius);
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 700;
}
.bolt-badge svg { width: 14px; height: 14px; }
.bolt-badge.is-ok { background: var(--bolt-success-bg); color: var(--bolt-success); }
.bolt-badge.is-fix { background: var(--bolt-info-bg); color: var(--bolt-info); }
.bolt-badge.is-review { background: var(--bolt-warning-bg); color: var(--bolt-warning); }
.bolt-badge.is-unknown { background: var(--bolt-unknown-bg); color: var(--bolt-unknown); }

/* ============ Trust bar ============ */
.bolt-trust { border-bottom: 1px solid var(--bolt-line); background: var(--bolt-surface-soft); font-family: var(--bolt-font); }
.bolt-trust .bolt-shell { padding-block: 32px; }
@media (min-width: 640px) { .bolt-trust .bolt-shell { padding-block: 40px; } }
.bolt-trust-grid { display: grid; gap: 24px; }
@media (min-width: 640px) { .bolt-trust-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.bolt-trust-item { display: flex; gap: 12px; }
.bolt-trust-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: var(--bolt-radius);
	background: rgba(253, 208, 0, .25);
}
.bolt-trust-icon svg { width: 18px; height: 18px; color: var(--bolt-ink); }
.bolt-trust-item h3 { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--bolt-ink); }
.bolt-trust-item p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--bolt-ink-muted); }

/* ============ Generic content section shell ============ */
.bolt-section { border-bottom: 1px solid var(--bolt-line); background: var(--bolt-surface); padding-block: 56px; font-family: var(--bolt-font); }
@media (min-width: 640px) { .bolt-section { padding-block: 80px; } }
.bolt-section.is-soft { background: var(--bolt-surface-soft); }
.bolt-section-heading .eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--bolt-ink-muted); }
.bolt-section-heading h1, .bolt-section-heading h2 { margin: 8px 0 0; font-size: 25px; font-weight: 900; letter-spacing: -0.01em; color: var(--bolt-ink); }
@media (min-width: 640px) { .bolt-section-heading h1, .bolt-section-heading h2 { font-size: 30px; } }
.bolt-section-heading p { margin: 8px 0 0; max-width: 58ch; font-size: 14px; line-height: 1.7; color: var(--bolt-ink-muted); }

/* ============ Basis section (DATA & CARE) ============ */
.bolt-basis-cards { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 768px) { .bolt-basis-cards { grid-template-columns: repeat(3, 1fr); } }
.bolt-info-card { border-top: 2px solid var(--bolt-brand); background: var(--bolt-surface); padding: 20px; }
.bolt-info-card svg { display: block; width: 60px; height: 60px; margin: 0 auto; color: var(--bolt-charcoal); }
.bolt-info-card h3 { margin: 16px 0 0; font-size: 15px; font-weight: 700; color: var(--bolt-ink); }
.bolt-info-card p { margin: 8px 0 0; font-size: 13px; line-height: 1.75; color: var(--bolt-ink-muted); }
.bolt-basis-footnote {
	display: grid;
	gap: 16px;
	margin-top: 24px;
	border-radius: var(--bolt-radius-panel);
	border: 1px solid var(--bolt-line);
	background: var(--bolt-surface);
	padding: 20px;
	font-size: 13px;
	color: var(--bolt-ink-muted);
}
@media (min-width: 640px) { .bolt-basis-footnote { grid-template-columns: repeat(3, 1fr); padding: 24px; } }
.bolt-basis-footnote p.label { margin: 0; font-weight: 700; color: var(--bolt-ink); }
.bolt-basis-footnote p.detail { margin: 6px 0 0; line-height: 1.7; }

/* ============ Features section ============ */
.bolt-feature-grid { display: grid; gap: 32px; margin-top: 32px; }
@media (min-width: 640px) { .bolt-feature-grid { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
.bolt-feature-item { display: flex; gap: 16px; border-top: 1px solid var(--bolt-line); padding-top: 20px; }
.bolt-feature-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--bolt-radius);
	background: rgba(253, 208, 0, .25);
}
.bolt-feature-icon svg { width: 20px; height: 20px; color: var(--bolt-ink); }
.bolt-feature-item h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--bolt-ink); }
.bolt-feature-item p { margin: 6px 0 0; font-size: 14px; line-height: 1.75; color: var(--bolt-ink-muted); }

/* ============ Use cases section ============ */
.bolt-usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
@media (min-width: 768px) { .bolt-usecase-grid { grid-template-columns: repeat(5, 1fr); } }
.bolt-usecase-card { border-radius: var(--bolt-radius-panel); border: 1px solid var(--bolt-line); padding: 16px; }
@media (min-width: 640px) { .bolt-usecase-card { padding: 20px; } }
.bolt-usecase-card p.title { margin: 0; font-size: 15px; font-weight: 700; color: var(--bolt-ink); }
.bolt-usecase-card p.desc { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--bolt-ink-muted); }

/* ============ Guide cards (TOP teaser + /guides/ hub) ============ */
.bolt-guides-breadcrumb { padding-top: 24px; }
@media (min-width: 640px) { .bolt-guides-breadcrumb { padding-top: 32px; } }
.bolt-guide-grid { display: grid; grid-template-columns: 1fr; column-gap: 24px; row-gap: 24px; margin-top: 36px; }
@media (min-width: 640px) { .bolt-guide-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; } }
@media (min-width: 1024px) { .bolt-guide-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .bolt-guide-grid.is-two { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin-left: auto; margin-right: auto; } }
@media (min-width: 640px) { .bolt-guide-grid.is-one { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; } }
.bolt-guides-more { margin: 32px 0 0; text-align: center; }
.bolt-guides-more .hontoko-icon { width: 14px; height: 14px; color: currentColor; margin-left: 2px; }
.bolt-guide-card { border-radius: var(--bolt-radius-panel); border: 1px solid var(--bolt-line); overflow: hidden; background: var(--bolt-surface); transition: border-color 180ms ease; }
@media (hover: hover) and (pointer: fine) { .bolt-guide-card:hover { border-color: var(--bolt-ink); } }
.bolt-guide-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.bolt-guide-card-link:focus-visible { outline: 2px solid var(--bolt-ink); outline-offset: -2px; }
.bolt-guide-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bolt-surface-soft); }
.bolt-guide-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bolt-guide-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 640px) { .bolt-guide-card-body { padding: 20px 22px 24px; } }
.bolt-guide-card-category { margin: 0 0 11px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--bolt-ink-muted); }
.bolt-guide-card-body h3 { margin: 0; font-size: 16px; line-height: 1.5; color: var(--bolt-ink); }
.bolt-guide-card-excerpt { margin: 13px 0 0; font-size: 13px; line-height: 1.7; color: var(--bolt-ink-muted); flex: 1; }
.bolt-guide-card-cta { margin-top: 23px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--bolt-ink); }
.bolt-guide-card-cta .hontoko-icon { width: 14px; height: 14px; color: currentColor; transition: transform 180ms ease; }
@media (hover: hover) and (pointer: fine) { .bolt-guide-card:hover .bolt-guide-card-cta .hontoko-icon { transform: translateX(3px); } }

/* ============ How it works section ============ */
.bolt-steps-panel {
	margin-top: 32px;
	border-radius: var(--bolt-radius-panel);
	border: 1px solid var(--bolt-line);
	background: var(--bolt-surface);
	padding: 20px;
}
@media (min-width: 640px) { .bolt-steps-panel { padding: 28px; } }
.bolt-steps-panel ol { list-style: none; margin: 0; padding: 0; }
.bolt-steps-panel li {
	display: flex;
	gap: 16px;
	padding-block: 16px;
	border-top: 1px solid var(--bolt-line);
}
.bolt-steps-panel li:first-child { border-top: none; padding-top: 0; }
.bolt-steps-panel li:last-child { padding-bottom: 0; }
.bolt-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 999px;
	background: var(--bolt-brand);
	font-size: 13px;
	font-weight: 900;
	color: var(--bolt-ink);
}
.bolt-steps-panel h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--bolt-ink); }
.bolt-steps-panel p { margin: 4px 0 0; font-size: 13px; line-height: 1.7; color: var(--bolt-ink-muted); }

/* ============ Pricing (home teaser) ============ */
.bolt-pricing-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 42em;
	margin-top: 32px;
	border-radius: var(--bolt-radius-panel);
	border: 1px solid var(--bolt-line);
	background: var(--bolt-surface-soft);
	padding: 20px;
}
@media (min-width: 640px) { .bolt-pricing-card { flex-direction: row; align-items: center; justify-content: space-between; padding: 28px; } }
.bolt-pricing-badge-row { display: flex; align-items: center; gap: 8px; }
.bolt-pricing-badge { border-radius: var(--bolt-radius); background: var(--bolt-brand); padding: 2px 8px; font-size: 12px; font-weight: 700; color: var(--bolt-ink); }
.bolt-pricing-card h3 { margin: 0; font-size: 20px; font-weight: 900; color: var(--bolt-ink); }
.bolt-pricing-card p { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--bolt-ink-muted); }
.bolt-pricing-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	height: 44px;
	border-radius: var(--bolt-radius);
	background: var(--bolt-brand);
	padding: 0 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--bolt-ink);
	text-decoration: none;
}
.bolt-pricing-cta:hover { background: var(--bolt-brand-dark); }
.bolt-pricing-cta svg { width: 16px; height: 16px; }

/* ============ FAQ section ============ */
.bolt-faq-groups { display: grid; gap: 32px; margin-top: 32px; }
@media (min-width: 1024px) { .bolt-faq-groups { grid-template-columns: repeat(2, 1fr); } }
.bolt-faq-group h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--bolt-ink);
}
.bolt-faq-group h3 .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--bolt-brand); flex-shrink: 0; }
.bolt-faq-items {
	border-top: 1px solid var(--bolt-line);
	border-bottom: 1px solid var(--bolt-line);
	background: var(--bolt-surface);
}
.bolt-faq-item { border-bottom: 1px solid var(--bolt-line); }
.bolt-faq-item:last-child { border-bottom: none; }
.bolt-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 500;
	color: var(--bolt-ink);
	cursor: pointer;
	list-style: none;
}
.bolt-faq-item summary::-webkit-details-marker { display: none; }
.bolt-faq-item summary:hover { background: var(--bolt-surface-soft); }
.bolt-faq-item summary::after {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: currentColor;
	color: var(--bolt-ink-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .15s ease;
}
.bolt-faq-item[open] summary::after { transform: rotate(180deg); }
.bolt-faq-item p {
	margin: 0;
	padding: 0 16px 16px;
	font-size: 13px;
	line-height: 1.75;
	color: var(--bolt-ink-muted);
}
.bolt-faq-item p a { color: var(--bolt-info); }

/* ============ Checker ============ */
.bolt-checker { border-bottom: 1px solid var(--bolt-line); background: var(--bolt-surface); padding-block: 56px; font-family: var(--bolt-font); }
@media (min-width: 640px) { .bolt-checker { padding-block: 80px; } }
.bolt-checker-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.bolt-checker-header .eyebrow { margin: 0; font-size: 13px; font-weight: 700; color: var(--bolt-ink-muted); }
.bolt-checker-header h2 { margin: 8px 0 0; font-size: 26px; font-weight: 900; letter-spacing: -0.01em; color: var(--bolt-ink); }
@media (min-width: 640px) { .bolt-checker-header h2 { font-size: 32px; } }
.bolt-checker-header .lead { margin: 8px 0 0; font-size: 14px; color: var(--bolt-ink-muted); }
.bolt-checker-privacy-note { display: none; align-items: center; gap: 8px; font-size: 12px; color: var(--bolt-ink-muted); }
.bolt-checker-privacy-note svg { width: 16px; height: 16px; color: var(--bolt-ink); }
@media (min-width: 640px) { .bolt-checker-privacy-note { display: flex; } }

.tool-shell {
	border-radius: var(--bolt-radius-panel);
	border: 1px solid var(--bolt-line);
	background: var(--bolt-surface);
}
.tool-shell .tool-steps-wrap { border-bottom: 1px solid var(--bolt-line); padding: 20px; }
@media (min-width: 640px) { .tool-shell .tool-steps-wrap { padding: 20px 32px; } }
.tool-shell .tool-body { padding: 24px 20px; }
@media (min-width: 640px) { .tool-shell .tool-body { padding: 32px; } }

/* Step indicator */
.tool-steps { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.tool-steps li { display: flex; flex: 1 1 0; align-items: center; }
.tool-steps li:last-child { flex: 0 0 auto; }
.tool-steps .step-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
@media (min-width: 640px) { .tool-steps .step-inner { flex-direction: row; text-align: left; } }
.tool-steps .step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	background: var(--bolt-surface-soft);
	color: var(--bolt-ink-muted);
	box-shadow: inset 0 0 0 1px var(--bolt-line);
}
.tool-steps li.is-active .step-num,
.tool-steps li.is-done .step-num { color: var(--bolt-ink); }
.tool-steps li.is-active .step-num { background: var(--bolt-brand); }
.tool-steps li.is-done .step-num { background: var(--bolt-ink); color: #fff; }
.tool-steps .step-label { font-size: 13px; line-height: 1.3; font-weight: 500; color: var(--bolt-ink-muted); }
.tool-steps li.is-active .step-label,
.tool-steps li.is-done .step-label { font-weight: 700; color: var(--bolt-ink); }
.tool-steps .step-connector { display: none; flex: 1 1 auto; height: 1px; margin: 0 8px; background: var(--bolt-line); }
.tool-steps li.is-done .step-connector { background: var(--bolt-ink); }
@media (min-width: 640px) { .tool-steps .step-connector { display: block; } }

/* Method tabs -- a filled background + thicker active underline on top of
   the plain text-color change, so the two tabs read unmistakably as a
   switchable control rather than two static headings. */
.method-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--bolt-line); background: var(--bolt-surface-soft); border-radius: var(--bolt-radius-panel) var(--bolt-radius-panel) 0 0; overflow: hidden; }
.method-tab {
	border: none;
	background: none;
	cursor: pointer;
	text-align: left;
	padding: 14px 16px;
	border-bottom: 3px solid transparent;
	color: var(--bolt-ink-muted);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.method-tab .tab-title { display: block; font-size: 15px; font-weight: 700; }
.method-tab .tab-meta { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; }
.method-tab:hover { background: rgba(253, 208, 0, .12); color: var(--bolt-ink); }
.method-tab.is-active { background: var(--bolt-surface); border-bottom-color: var(--bolt-brand-darker); color: var(--bolt-ink); }
.method-panels { padding-top: 24px; }
.method-panel[hidden] { display: none; }

/* File upload panel */
.drop-zone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: var(--bolt-radius-panel);
	border: 2px dashed var(--bolt-line);
	background: var(--bolt-surface-soft);
	padding: 40px 16px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.drop-zone:hover { background: rgba(253, 208, 0, .05); }
.drop-zone.is-dragover { border-color: var(--bolt-brand-darker); background: rgba(253, 208, 0, .1); }
.drop-zone svg.drop-icon { width: 32px; height: 32px; color: var(--bolt-ink-muted); }
.drop-zone-idle strong { display: block; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--bolt-ink); }
.drop-zone-idle small { display: block; margin-top: 4px; font-size: 13px; color: var(--bolt-ink-muted); }
.drop-zone-idle .drop-action { display: none; }
.drop-zone-selected {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-radius: var(--bolt-radius-panel);
	border: 1px solid var(--bolt-line);
	background: var(--bolt-surface-soft);
	padding: 14px 16px;
}
.drop-zone-selected svg { width: 32px; height: 32px; flex-shrink: 0; color: var(--bolt-success); }
.drop-zone-selected > div { min-width: 0; }
.drop-zone-selected .selected-file-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--bolt-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-zone-selected .selected-file-meta { margin: 0; font-size: 12px; color: var(--bolt-ink-muted); }
.selected-file-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.selected-file-actions .button { height: 36px; padding: 0 10px; font-size: 13px; }

.input-actions,
.direct-input-fields .direct-input-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 20px;
	row-gap: 8px;
	margin-top: 12px;
}
.button-outline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	border-radius: var(--bolt-radius);
	border: 1px solid var(--bolt-line);
	background: none;
	padding: 0 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bolt-ink);
	cursor: pointer;
	transition: border-color .15s ease;
}
.button-outline:hover { border-color: var(--bolt-ink); }
.button-outline:disabled { cursor: not-allowed; opacity: .4; }
/* tool-ui.css (loaded earlier) sets align-self:flex-start + margin-top:8px
   on this button specifically, which pulls it to the top of the row while
   its サンプルデータで試す sibling stays centered via the parent's
   align-items:center -- override both so the two buttons line up. */
.direct-input-add-row { align-self: center; margin-top: 0; }
.template-download-button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bolt-ink-muted);
	text-decoration: underline;
	text-decoration-color: var(--bolt-line);
	text-underline-offset: 2px;
}
.template-download-button:hover { color: var(--bolt-ink); }
.template-download-button svg { width: 14px; height: 14px; }
.upload-format-detail,
.direct-input-bulk-hint { margin-top: 12px; font-size: 13px; line-height: 1.6; color: var(--bolt-ink-muted); }
.upload-format-detail code, .direct-input-bulk-hint code { font-weight: 500; color: var(--bolt-ink); font-style: normal; }

/* Direct input panel */
.direct-input-heading { display: flex; align-items: center; justify-content: space-between; }
.direct-input-heading #direct-input-label { font-size: 13px; line-height: 1.6; color: var(--bolt-ink-muted); }
.input-counter { flex-shrink: 0; font-size: 13px; font-weight: 500; color: var(--bolt-ink-muted); }
.direct-input-rows { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.direct-input-row { display: grid; grid-template-columns: 1fr 40px; gap: 8px; }
@media (min-width: 640px) { .direct-input-row { grid-template-columns: 120px 1fr 40px; } }
.direct-input-row-fields { display: grid; grid-template-columns: 120px 1fr; gap: 8px; grid-column: span 2; }
@media (min-width: 640px) { .direct-input-row-fields { grid-column: auto; display: contents; } }
.direct-input-field { display: block; }
.direct-input-postal, .direct-input-address {
	width: 100%;
	height: 44px;
	border-radius: var(--bolt-radius);
	border: 1px solid var(--bolt-line);
	padding: 0 12px;
	font-size: 14px;
	color: var(--bolt-ink);
}
.direct-input-postal:focus, .direct-input-address:focus { outline: 2px solid var(--bolt-ink); outline-offset: 1px; }
.direct-input-remove-row {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	width: 100%;
	border: none;
	background: none;
	color: var(--bolt-ink-muted);
	cursor: pointer;
}
.direct-input-remove-row:hover { color: var(--bolt-danger); }
.direct-input-remove-row[hidden] { visibility: hidden; }

/* Run button + message */
.tool-run-row { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--bolt-line); }
.tool-run-note { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--bolt-ink-muted); }
.tool-run-row .clear-all-button { margin-right: 14px; margin-bottom: 8px; }
.button-primary-run {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	border-radius: var(--bolt-radius);
	background: var(--bolt-brand);
	border: none;
	padding: 0 24px;
	font-size: 15px;
	font-weight: 700;
	color: var(--bolt-ink);
	cursor: pointer;
	transition: background-color .15s ease;
}
@media (min-width: 640px) { .button-primary-run { width: auto; } }
.button-primary-run:hover { background: var(--bolt-brand-dark); }
.button-primary-run svg { width: 18px; height: 18px; }
.tool-run-hint { margin: 12px 0 0; font-size: 12px; color: var(--bolt-ink-muted); }

.tool-message {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 20px;
	border-radius: var(--bolt-radius);
	border: 1px solid var(--bolt-line);
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--bolt-ink-muted);
}
.tool-message[data-state="error"] { border-color: var(--bolt-danger-border); background: var(--bolt-danger-bg); color: var(--bolt-danger); }
/* "ready" = a file/address has just been entered and is waiting on 住所を
   確認する -- shares the success/processing green styling (not a separate
   color) so the confirmation is noticeable the moment a file is selected
   or a row is filled in, without introducing a second, redundant alert
   color for what is effectively the same "you're set" message. */
.tool-message[data-state="ready"],
.tool-message[data-state="success"],
.tool-message[data-state="processing"] { border-color: var(--bolt-success-border); background: var(--bolt-success-bg); color: var(--bolt-success); }

/* Progress */
.progress-area { margin-top: 20px; }
.progress-bar-track { margin-top: 12px; height: 6px; border-radius: 999px; background: var(--bolt-line); overflow: hidden; }
.progress-bar-fill { display: block; height: 100%; width: 40%; border-radius: 999px; background: var(--bolt-brand); animation: bolt-progress-slide 1.1s ease-in-out infinite; }
@keyframes bolt-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.progress-elapsed, .progress-detail { margin-top: 8px; font-size: 12px; color: var(--bolt-ink-muted); }
.progress-watch-note { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--bolt-ink-muted); }
.progress-pause-button, .progress-resume-button {
	display: inline-flex;
	align-items: center;
	height: 36px;
	margin-top: 8px;
	padding: 0 14px;
	border-radius: var(--bolt-radius);
	border: 1px solid var(--bolt-line);
	background: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--bolt-ink);
	cursor: pointer;
}

/* Results panel */
.results-area { margin-top: 8px; }
.results-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.results-heading h3 { margin: 0; font-size: 20px; font-weight: 900; color: var(--bolt-ink); }
.results-heading p { margin: 4px 0 0; font-size: 13px; color: var(--bolt-ink-muted); }
.results-back-link { flex-shrink: 0; border: none; background: none; font-size: 13px; font-weight: 700; color: var(--bolt-ink-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.results-back-link:hover { color: var(--bolt-ink); }

.result-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .result-summary { grid-template-columns: repeat(5, 1fr); gap: 12px; } }
.result-summary > div { border-radius: var(--bolt-radius-panel); border: 1px solid var(--bolt-line); background: var(--bolt-surface); padding: 12px; text-align: center; }
@media (min-width: 640px) { .result-summary > div { text-align: left; } }
.result-summary span { display: block; font-size: 12px; font-weight: 500; color: var(--bolt-ink-muted); }
.result-summary strong { display: block; margin-top: 4px; font-size: 20px; font-weight: 900; line-height: 1; color: var(--bolt-ink); }

.result-filter-row { margin-top: 20px; }
.result-filter-row label > span:first-child { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--bolt-ink-muted); }
.result-filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.result-filter-pills button {
	border-radius: 999px;
	border: 1px solid var(--bolt-line);
	background: var(--bolt-surface);
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bolt-ink-muted);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.result-filter-pills button:hover { border-color: var(--bolt-ink); color: var(--bolt-ink); }
.result-filter-pills button[aria-pressed="true"] { border-color: var(--bolt-ink); background: var(--bolt-ink); color: #fff; }
.result-filter-row select[data-filter] { display: none; }

.result-list-container { margin-top: 16px; border-radius: var(--bolt-radius-panel); border: 1px solid var(--bolt-line); overflow-x: auto; }
.result-table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; font-size: 14px; }
.result-table thead tr { background: var(--bolt-surface-soft); font-size: 12px; font-weight: 700; color: var(--bolt-ink-muted); }
.result-table th, .result-table td { border-bottom: 1px solid var(--bolt-line); padding: 10px 12px; vertical-align: top; }
.result-table tbody tr:last-child td { border-bottom: none; }
.result-table td { color: var(--bolt-ink); }
.reason-list { margin: 0; padding-left: 1.1em; }
.reason-list li { margin-top: 2px; }
.reason-list li:first-child { margin-top: 0; }

.result-preview-note { margin-top: 12px; font-size: 12px; color: var(--bolt-ink-muted); }
.result-toolbar { margin-top: 20px; }
.result-toolbar .button-primary-run { display: inline-flex; }

/* Status badges -- targets the exact classes tool-demo.js's buildResultRow()
   already outputs (status status-ok / status-fix / status-review /
   status-unknown, plus a separate status-badge review-flag for the 要確認
   column) rather than inventing new class names, so this is a pure CSS
   re-skin with no JS change needed. Unprefixed (not scoped to
   .result-table) because hero.php's "チェック結果のイメージ" preview reuses
   these exact same classes, guaranteeing it always matches the real
   result table's colors and type instead of drifting out of sync. */
.status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: var(--bolt-radius);
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 700;
}
.status.status-ok { background: var(--bolt-success-bg); color: var(--bolt-success); }
.status.status-fix { background: var(--bolt-info-bg); color: var(--bolt-info); }
.status.status-review { background: var(--bolt-warning-bg); color: var(--bolt-warning); }
.status.status-unknown { background: var(--bolt-unknown-bg); color: var(--bolt-unknown); }
/* hero.php's preview badges render their icon via hontoko_icon(), which
   carries the base .hontoko-icon class (color: var(--color-brand), i.e.
   yamabuki yellow) -- without an explicit override here that beats it on
   specificity, the icon shows yellow instead of following the badge's own
   status color (orange for review, green for ok) like the real result
   table's icons (which don't carry that class) already do. */
.status svg, .status .status-icon { width: 14px; height: 14px; color: currentColor; }
.status-badge.review-flag { background: var(--bolt-warning-bg); color: var(--bolt-warning); border-radius: var(--bolt-radius); padding: 2px 8px; font-size: 12px; font-weight: 700; }

/* ============ Document pages (pricing / about-beta / data-handling /
   terms / privacy-policy) -- same BOLT type scale and tokens as the rest
   of the site, just applied to long-form reading content instead of
   marketing sections, so these pages read as designed by the same
   system rather than a leftover pre-BOLT layout. ============ */
.bolt-doc-page {
	width: 100%;
	max-width: 760px;
	margin-inline: auto;
	padding: 32px 16px 80px;
	font-family: var(--bolt-font);
}
@media (min-width: 640px) { .bolt-doc-page { padding: 40px 24px 96px; } }

.bolt-doc-page .breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 24px;
	font-size: 13px;
	color: var(--bolt-ink-muted);
}
.bolt-doc-page .breadcrumbs a { color: inherit; text-decoration: none; }
.bolt-doc-page .breadcrumbs a:hover { color: var(--bolt-ink); text-decoration: underline; }
.bolt-doc-page .breadcrumbs span[aria-hidden] { color: var(--bolt-line); }

.bolt-doc-header { border-bottom: 1px solid var(--bolt-line); padding-bottom: 24px; margin-bottom: 32px; }
.bolt-doc-title { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -0.01em; line-height: 1.3; color: var(--bolt-ink); }
@media (min-width: 640px) { .bolt-doc-title { font-size: 32px; } }
.bolt-doc-meta { margin: 10px 0 0; font-size: 13px; color: var(--bolt-ink-muted); }

.bolt-doc-lead-note {
	display: flex;
	gap: 8px;
	margin-bottom: 32px;
	border-radius: var(--bolt-radius);
	border: 1px solid var(--bolt-info-border);
	background: var(--bolt-info-bg);
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--bolt-info);
}

/* 80% of the original 20/24px size and a flatter 80%-black gray (the
   existing --bolt-charcoal token) instead of full-weight ink, so these
   in-body section headings read as organizational labels rather than
   competing with .bolt-doc-title for visual weight. */
.bolt-doc-content h2 { margin: 40px 0 0; font-size: 16px; font-weight: 900; letter-spacing: -0.01em; color: var(--bolt-charcoal); }
@media (min-width: 640px) { .bolt-doc-content h2 { font-size: 19px; } }
.bolt-doc-content h2:first-child { margin-top: 0; }
.bolt-doc-content h3 { margin: 24px 0 0; font-size: 15px; font-weight: 700; color: var(--bolt-ink); }
/* text-align: left (not justify) -- justify on Japanese body text stretches
   inter-character spacing unevenly line to line and renders noticeably
   differently across Mac/Windows font metrics, which costs more in
   readability/cross-OS consistency than the aligned right edge is worth. */
.bolt-doc-content p { margin: 16px 0 0; font-size: 15px; line-height: 1.8; color: var(--bolt-ink); text-align: left; }
.bolt-doc-content h2 + p, .bolt-doc-content h3 + p { margin-top: 10px; }
/* Extra breathing room before a paragraph that starts a new sub-group
   right after a preceding list (e.g. a "一方で、次のようなことは
   行っていません" paragraph following a "確認できます" list under the
   same h2) -- the default 16px paragraph rhythm reads as a continuation
   rather than a clear break between the two groups. */
.bolt-doc-content p.doc-list-break { margin-top: 32px; }
.bolt-doc-content ul, .bolt-doc-content ol { margin: 16px 0 0; padding-left: 1.3em; font-size: 15px; line-height: 1.8; color: var(--bolt-ink); }
.bolt-doc-content li { margin-top: 6px; text-align: left; }
.bolt-doc-content li:first-child { margin-top: 0; }
.bolt-doc-content a { color: var(--bolt-info); text-decoration: underline; text-decoration-color: var(--bolt-info-border); text-underline-offset: 2px; }
.bolt-doc-content a:hover { text-decoration-color: currentColor; }
.bolt-doc-content table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 14px; }
.bolt-doc-content th, .bolt-doc-content td { border: 1px solid var(--bolt-line); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--bolt-ink); }
.bolt-doc-content th { background: var(--bolt-surface-soft); font-weight: 700; }

/* Blog article header meta line (category + date) reuses .bolt-doc-meta;
   the_category() outputs real <a> tags so give them the same muted-then-
   ink-on-hover treatment used elsewhere, not WordPress's default blue. */
.bolt-doc-meta a { color: inherit; text-decoration: none; }
.bolt-doc-meta a:hover { color: var(--bolt-ink); text-decoration: underline; }

/* Featured image -- full width, intrinsic height, minimal radius, no
   shadow. Deliberately plain per the "white/black/charcoal, yamabuki as
   accent only, no heavy card decoration" direction for blog content. */
.bolt-doc-thumbnail { margin: 24px 0 0; }
.bolt-doc-thumbnail img { display: block; width: 100%; height: auto; border-radius: var(--bolt-radius); }

/* Blog list (archive/index) -- same thin-rule, no-shadow card language as
   the rest of the site; each card is just a title + meta + excerpt
   separated by a hairline, not a boxed/shadowed "blog card". */
.bolt-post-list { display: flex; flex-direction: column; margin-top: 8px; }
.bolt-post-card { padding: 24px 0; border-top: 1px solid var(--bolt-line); }
.bolt-post-card:first-child { border-top: none; padding-top: 0; }
.bolt-post-card h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -0.01em; }
.bolt-post-card h2 a { color: var(--bolt-ink); text-decoration: none; }
.bolt-post-card h2 a:hover { text-decoration: underline; }
.bolt-post-card .bolt-doc-meta { margin-top: 6px; }
.bolt-post-card .entry-summary,
.bolt-post-card > p:last-child { margin: 10px 0 0; font-size: 14px; line-height: 1.8; color: var(--bolt-ink-muted); }

.bolt-doc-related { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--bolt-line); }
.bolt-doc-related h2 { margin: 0; font-size: 16px; font-weight: 900; color: var(--bolt-charcoal); }
.bolt-doc-related p { margin: 8px 0 0; font-size: 14px; color: var(--bolt-ink-muted); }

/* Pricing plan cards -- same border-top-accent + badge language as the
   home page's .bolt-info-card / .bolt-pricing-badge, just three cards
   instead of one, with the current plan called out via a brand border. */
.bolt-plan-grid { display: grid; gap: 16px; margin: 32px 0; }
@media (min-width: 768px) { .bolt-plan-grid { grid-template-columns: repeat(3, 1fr); } }
.bolt-plan-card { border-top: 2px solid var(--bolt-line); background: var(--bolt-surface); padding: 20px; }
.bolt-plan-card.is-current { border-top-color: var(--bolt-brand); box-shadow: 0 0 0 1px var(--bolt-brand); }
.bolt-plan-badge { display: inline-block; margin-bottom: 12px; border-radius: var(--bolt-radius); background: var(--bolt-surface-soft); padding: 2px 8px; font-size: 12px; font-weight: 700; color: var(--bolt-ink-muted); }
.bolt-plan-card.is-current .bolt-plan-badge { background: var(--bolt-brand); color: var(--bolt-ink); }
.bolt-plan-card h3 { margin: 0 0 4px; font-size: 17px; font-weight: 900; color: var(--bolt-ink); }
.bolt-plan-card p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--bolt-ink-muted); }
.bolt-plan-card ul { margin: 12px 0 0; padding-left: 1.2em; font-size: 13px; line-height: 1.7; color: var(--bolt-ink-muted); }
.bolt-plan-card li { margin-top: 4px; }
.bolt-plan-card li:first-child { margin-top: 0; }

/* ============ Final CTA ============ */
.bolt-final-cta { background: var(--bolt-surface); padding-block: 56px; font-family: var(--bolt-font); }
@media (min-width: 640px) { .bolt-final-cta { padding-block: 80px; } }
.bolt-final-cta .bolt-shell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
@media (min-width: 640px) { .bolt-final-cta .bolt-shell { flex-direction: row; align-items: center; } }
.bolt-final-cta .eyebrow { margin: 0; font-size: 13px; font-weight: 700; color: var(--bolt-ink-muted); }
.bolt-final-cta h2 { margin: 8px 0 0; font-size: 24px; font-weight: 900; letter-spacing: -0.01em; color: var(--bolt-ink); }
@media (min-width: 640px) { .bolt-final-cta h2 { font-size: 30px; } }
.bolt-final-cta p { margin: 8px 0 0; font-size: 14px; color: var(--bolt-ink-muted); }