/*
Theme Name: Parchilo
Theme URI: https://parchilo.com
Author: Nexaura Techs
Author URI: https://nexauratechs.com
Description: Editorial-fintech theme for Parchilo — document-to-invoice automation. Warm paper canvas, ledger rules, deep emerald ink.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parchilo
Tags: business, custom-colors, custom-menu, blog, one-column, editor-style
*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
	/* Neutral greys, not warm cream — the cream canvas is the strongest
	   "generated by a model" tell in this whole palette. */
	--paper:      #f1f1e6;
	--paper-2:    #fbfbf8;
	--paper-3:    #e7e7da;
	--card:       #ffffff;

	--ink:        #1d1d1d;
	--ink-2:      #313131;
	--muted:      #6b6a65;
	--line:       #dfdfd2;
	--line-soft:  #ebebe0;

	--brand:      #232326;
	--brand-700:  #131316;
	--brand-600:  #2c2c30;
	--brand-300:  #9e9c9c;
	--brand-100:  #e4e4dd;
	--brand-50:   #f6f6f0;

	/* Rubicflow's signal colour: amber CTA, always on dark ink text. */
	--accent:     #fdc448;
	--accent-600: #f2b52f;

	/* Kept only for error/danger states — no longer a decorative accent. */
	--clay:       #c0392b;
	--clay-50:    #fdeeec;
	--gold:       #b8862b;

	--radius-sm:  6px;
	--radius:     14px;
	--radius-lg:  18px;
	--radius-xl:  28px;

	/* Flat and tight. Deep coloured glows read as decoration, not hierarchy. */
	--shadow-xs:  0 1px 1px rgba(16,24,40,.04);
	--shadow-sm:  0 1px 2px rgba(16,24,40,.06);
	--shadow-md:  0 2px 6px rgba(16,24,40,.07);
	--shadow-lg:  0 8px 24px -14px rgba(16,24,40,.20);
	--shadow-ring:0 0 0 1px var(--line);

	--font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

	--wrap:      1180px;
	--wrap-text: 720px;
	--ease:      cubic-bezier(.22,.61,.36,1);
	--ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   2. Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.65;
	font-feature-settings: "ss01" 1, "cv01" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* The paper-grain overlay was pure texture-for-texture's-sake. Removed. */

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--brand-700); }

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 500; line-height: 1.06; letter-spacing: -.03em; }
h1, h2 { font-family: var(--font-sans); }
h3, h4 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -.018em; line-height: 1.28; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--brand-100); color: var(--brand-700); }

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 16px; top: -60px;
	background: var(--ink); color: #fff; padding: 10px 16px;
	border-radius: var(--radius-sm); z-index: 999; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; color: #fff; }

/* ============================================================
   3. Layout primitives
   ============================================================ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; position: relative; z-index: 1; }
.wrap--text { max-width: var(--wrap-text); }
.section { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.section--tight { padding: clamp(48px, 6vw, 84px) 0; }
.section--paper2 { background: var(--paper-2); }
.center { text-align: center; }

.eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-mono);
	font-size: 11.5px; font-weight: 500;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--brand);
	margin: 0 0 18px;
}
.eyebrow::before {
	content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5;
}
.center .eyebrow::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .5; }

.section-title {
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	max-width: 20ch;
	margin-bottom: .35em;
}
.center .section-title { margin-inline: auto; }
.section-lead {
	font-size: 1.12rem;
	color: var(--muted);
	max-width: 58ch;
	margin-bottom: 0;
}
.center .section-lead { margin-inline: auto; }

/* Was an italic word-accent and a skewed gold/terracotta highlighter swipe —
   both are stock "AI landing page" flourishes. Now: colour, and a flat rule. */
.ink-accent { color: var(--brand); }
.ink-mark {
	position: relative; white-space: nowrap;
}
.ink-mark::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: 2px;
	background: var(--brand); opacity: .35;
}

/* ============================================================
   4. Buttons
   ============================================================ */
.btn {
	--btn-bg: var(--accent);
	--btn-fg: var(--ink);
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	font-family: var(--font-sans);
	font-size: .79rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
	padding: 17px 26px;
	border: 1px solid transparent;
	border-radius: 2px;
	background: var(--btn-bg); color: var(--btn-fg);
	text-decoration: none; cursor: pointer;
	transition: background-color .15s var(--ease);
	white-space: nowrap;
}
.btn:hover { color: var(--btn-fg); background: var(--accent-600); }
.btn:active { background: var(--accent-600); }
.btn svg { transition: transform .3s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

.btn--ghost {
	background: transparent; color: var(--ink); border-color: var(--line);
	box-shadow: none;
}
.btn--ghost:hover { background: var(--card); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-sm); }

.btn--ink { background: var(--ink); box-shadow: 0 10px 22px -14px rgba(20,23,28,.9); }
.btn--ink:hover { background: #000; }

.btn--sm { padding: 9px 16px; font-size: .88rem; }
.btn--lg { padding: 16px 30px; font-size: 1.03rem; }

.link-arrow {
	display: inline-flex; align-items: center; gap: 7px;
	font-weight: 600; text-decoration: none; font-size: .97rem;
}
.link-arrow svg { transition: transform .3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   5. Site header
   ============================================================ */
.site-header {
	position: sticky; top: 0; z-index: 60;
	background: color-mix(in srgb, var(--paper) 82%, transparent);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 74px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand-mark {
	width: 32px; height: 32px; border-radius: 8px;
	background: var(--brand);
	display: grid; place-items: center;
	flex: none;
}
.brand-mark svg { width: 17px; height: 17px; }
.brand-name { font-family: var(--font-display); font-size: 1.42rem; letter-spacing: -.01em; }
.brand-name em { font-style: italic; color: var(--brand); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a {
	display: block; padding: 8px 13px; border-radius: 999px;
	font-size: .95rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
	transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover, .nav .current-menu-item > a { color: var(--ink); background: color-mix(in srgb, var(--paper-3) 60%, transparent); }

.header-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
	display: none; width: 42px; height: 42px; border: 1px solid var(--line);
	border-radius: 12px; background: var(--card); cursor: pointer;
	align-items: center; justify-content: center; padding: 0;
}
.nav-toggle span { display: block; width: 17px; height: 1.5px; background: var(--ink); position: relative; transition: background .2s; }
.nav-toggle span::before, .nav-toggle span::after {
	content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--ink);
	transition: transform .3s var(--ease-out);
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top:  5.5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 940px) {
	.nav-toggle { display: inline-flex; }
	.nav {
		position: fixed; inset: 74px 0 auto 0;
		background: var(--paper);
		border-bottom: 1px solid var(--line);
		flex-direction: column; align-items: stretch; gap: 0;
		padding: 14px 24px 22px;
		transform: translateY(-8px); opacity: 0; pointer-events: none;
		transition: opacity .25s var(--ease), transform .25s var(--ease-out);
		max-height: calc(100dvh - 74px); overflow-y: auto;
	}
	.nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
	.nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav a { padding: 13px 4px; font-size: 1.05rem; border-radius: 8px; }
	.header-cta .btn--ghost { display: none; }
}

/* ============================================================
   6. Hero
   ============================================================ */
.hero {
	position: relative;
	padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 110px);
	overflow: hidden;
}
.hero::before {
	/* ledger rules */
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: repeating-linear-gradient(to bottom, transparent 0 43px, var(--line-soft) 43px 44px);
	-webkit-mask-image: radial-gradient(120% 80% at 50% 22%, #000 20%, transparent 78%);
	mask-image: radial-gradient(120% 80% at 50% 22%, #000 20%, transparent 78%);
	opacity: .9;
}
.hero::after {
	content: ""; position: absolute; z-index: 0;
	width: 780px; height: 780px; right: -240px; top: -320px;
	background: radial-gradient(circle at center, color-mix(in srgb, var(--brand) 15%, transparent), transparent 62%);
	filter: blur(10px);
	border-radius: 50%;
	pointer-events: none;
}

.hero-grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
	gap: clamp(32px, 5vw, 68px); align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }

.hero-pill {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 6px 14px 6px 7px;
	background: var(--card); border: 1px solid var(--line);
	border-radius: 999px; box-shadow: var(--shadow-xs);
	font-size: .84rem; color: var(--ink-2); margin-bottom: 26px;
}
.hero-pill b {
	font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
	letter-spacing: .08em; text-transform: uppercase;
	background: var(--brand-100); color: var(--brand-700);
	padding: 4px 9px; border-radius: 999px;
}

.hero h1 {
	font-size: clamp(2.7rem, 6.1vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -.028em;
	margin-bottom: .38em;
}
.hero h1 .line { display: block; }
.hero-lead {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	color: var(--muted); max-width: 46ch; margin-bottom: 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note {
	display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
	margin-top: 28px; font-size: .87rem; color: var(--muted);
}
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { color: var(--brand); }

/* --- the signature: document → invoice --- */
.flowstage {
	position: relative;
	min-height: 430px;
	display: grid; place-items: center;
	perspective: 1400px;
}
.paper {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	position: absolute;
}
.paper::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	box-shadow: inset 0 1px 0 #fff;
	pointer-events: none;
}

/* source document */
.doc-card {
	width: 250px; padding: 18px;
	left: 0; top: 24px;
	transform: rotate(-4.5deg);
	animation: docFloat 9s var(--ease) infinite;
	z-index: 2;
}
@keyframes docFloat {
	0%,100% { transform: rotate(-4.5deg) translateY(0); }
	50%     { transform: rotate(-3.2deg) translateY(-12px); }
}
.doc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.doc-ico {
	width: 30px; height: 30px; border-radius: 8px; flex: none;
	background: var(--clay-50); color: var(--clay);
	display: grid; place-items: center;
}
.doc-meta strong { display: block; font-size: .84rem; font-weight: 600; }
.doc-meta span { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); letter-spacing: .04em; }
.scan-lines { display: grid; gap: 8px; position: relative; overflow: hidden; border-radius: 6px; padding: 2px 0; }
.scan-lines i { display: block; height: 7px; border-radius: 3px; background: var(--paper-2); }
.scan-lines i:nth-child(1) { width: 100%; }
.scan-lines i:nth-child(2) { width: 84%; }
.scan-lines i:nth-child(3) { width: 92%; }
.scan-lines i:nth-child(4) { width: 62%; }
.scan-lines i:nth-child(5) { width: 78%; }
.scan-lines::after {
	content: ""; position: absolute; left: -10%; right: -10%; height: 42px;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 22%, transparent), transparent);
	animation: scanSweep 3.4s var(--ease) infinite;
	pointer-events: none;
}
@keyframes scanSweep {
	0%   { transform: translateY(-46px); opacity: 0; }
	18%  { opacity: 1; }
	72%  { opacity: 1; }
	100% { transform: translateY(96px); opacity: 0; }
}

/* travelling particles */
.wire {
	position: absolute; left: 210px; top: 190px; width: 130px; height: 2px; z-index: 1;
	background: repeating-linear-gradient(90deg, var(--brand-300) 0 6px, transparent 6px 12px);
	opacity: .55;
}
.wire i {
	position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%;
	background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
	animation: travel 2.6s var(--ease) infinite;
}
.wire i:nth-child(2) { animation-delay: .85s; }
.wire i:nth-child(3) { animation-delay: 1.7s; }
@keyframes travel {
	0%   { left: -4px; opacity: 0; transform: scale(.4); }
	15%  { opacity: 1; transform: scale(1); }
	85%  { opacity: 1; transform: scale(1); }
	100% { left: 126px; opacity: 0; transform: scale(.4); }
}

/* generated invoice */
.inv-card {
	width: 320px; right: 0; bottom: 10px;
	padding: 20px 20px 18px;
	transform: rotate(2.4deg);
	animation: invFloat 9s var(--ease) infinite .6s;
	z-index: 3;
}
@keyframes invFloat {
	0%,100% { transform: rotate(2.4deg) translateY(0); }
	50%     { transform: rotate(1.4deg) translateY(-14px); }
}
.inv-top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.inv-top h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.32rem; margin: 0; letter-spacing: -.01em; }
.inv-no { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); letter-spacing: .05em; }
.badge-paid {
	font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	background: var(--brand-100); color: var(--brand-700);
	padding: 5px 9px; border-radius: 6px;
	display: inline-flex; align-items: center; gap: 5px;
}
.badge-paid::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.inv-rows { padding: 12px 0 4px; display: grid; gap: 0; }
.inv-row {
	display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline;
	padding: 8px 0; border-bottom: 1px solid var(--line-soft);
	font-size: .85rem;
	opacity: 0;
	animation: rowIn .6s var(--ease-out) forwards;
}
.inv-row:nth-child(1) { animation-delay: .5s; }
.inv-row:nth-child(2) { animation-delay: .95s; }
.inv-row:nth-child(3) { animation-delay: 1.4s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.inv-row span:first-child { color: var(--ink-2); }
.inv-row span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .82rem; }

.inv-total {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--ink);
	opacity: 0; animation: rowIn .6s var(--ease-out) 1.85s forwards;
}
.inv-total small { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.inv-total b { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.stamp {
	position: absolute; right: 22px; bottom: 66px;
	font-family: var(--font-mono); font-size: .58rem; font-weight: 600;
	letter-spacing: .18em; text-transform: uppercase;
	color: var(--clay); border: 1.5px solid var(--clay);
	padding: 5px 8px; border-radius: 5px;
	transform: rotate(-11deg); opacity: 0;
	animation: stampIn .5s var(--ease-out) 2.3s forwards;
}
@keyframes stampIn {
	from { opacity: 0; transform: rotate(-11deg) scale(1.7); }
	to   { opacity: .82; transform: rotate(-11deg) scale(1); }
}

@media (max-width: 980px) {
	.flowstage { min-height: 400px; }
	.doc-card { left: 4%; }
	.inv-card { right: 2%; }
}
@media (max-width: 560px) {
	.flowstage { min-height: 470px; }
	.doc-card { width: 200px; left: 0; top: 0; }
	.inv-card { width: 285px; right: 0; bottom: 0; }
	.wire { display: none; }
}

/* ============================================================
   7. Proof strip
   ============================================================ */
.proof { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: color-mix(in srgb, var(--card) 55%, transparent); }
.proof-inner { display: flex; align-items: center; gap: 34px; padding: 22px 0; flex-wrap: wrap; justify-content: center; }
.proof-label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.proof-logo {
	font-family: var(--font-display); font-size: 1.24rem; color: var(--ink-2);
	opacity: .55; letter-spacing: -.01em; transition: opacity .3s var(--ease);
}
.proof-logo:hover { opacity: .9; }

/* ============================================================
   8. Steps
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step {
	position: relative; background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius-lg); padding: 30px 26px 28px;
	box-shadow: var(--shadow-xs);
	transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--brand-300); }
.step-no {
	font-family: var(--font-display); font-size: 3.1rem; line-height: 1;
	color: var(--paper-3); position: absolute; right: 22px; top: 18px;
	transition: color .35s var(--ease);
}
.step:hover .step-no { color: var(--brand-100); }
.step-ico {
	width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
	background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100);
	margin-bottom: 18px;
}
.step h3 { font-size: 1.16rem; margin-bottom: .4em; }
.step p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ============================================================
   9. Feature grid
   ============================================================ */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 56px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }
.feature {
	background: var(--card); padding: 32px 28px;
	transition: background-color .3s var(--ease);
	position: relative;
}
.feature:hover { background: var(--brand-50); }
.feature-ico { color: var(--brand); margin-bottom: 16px; }
.feature h3 { font-size: 1.04rem; margin-bottom: .35em; }
.feature p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ============================================================
   10. Split showcase
   ============================================================ */
.split { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(34px, 6vw, 76px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--flip .split-media { order: -1; } }
.split-list { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 14px; }
.split-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; color: var(--ink-2); }
.split-list svg { color: var(--brand); margin-top: 4px; flex: none; }

.mock {
	background: var(--card); border: 1px solid var(--line);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
	overflow: hidden;
}
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); background: var(--paper); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.mock-bar span { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); margin-left: 8px; letter-spacing: .04em; }
.mock-body { padding: 22px; display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.field div {
	border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
	font-size: .9rem; background: var(--paper); color: var(--ink-2);
}
.field-row { display: grid; grid-template-columns: 1fr 90px 110px; gap: 10px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.mock-total {
	display: flex; justify-content: space-between; align-items: baseline;
	border-top: 1.5px solid var(--ink); padding-top: 14px; margin-top: 4px;
}
.mock-total small { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mock-total b { font-family: var(--font-mono); font-size: 1.28rem; font-variant-numeric: tabular-nums; }

/* ============================================================
   11. Stats
   ============================================================ */
.statband { background: var(--ink); color: #fff; border-radius: var(--radius-xl); padding: clamp(36px, 5vw, 56px); position: relative; overflow: hidden; }
.statband::before {
	content: ""; position: absolute; inset: 0;
	background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 62px);
	pointer-events: none;
}
.statband::after {
	content: ""; position: absolute; width: 460px; height: 460px; left: -120px; bottom: -260px;
	background: radial-gradient(circle, rgba(18,152,122,.42), transparent 65%); pointer-events: none;
}
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; z-index: 1; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }
.stat b {
	display: block; font-family: var(--font-display); font-weight: 400;
	font-size: clamp(2.3rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.02em;
	margin-bottom: 8px;
}
.stat span { font-size: .9rem; color: rgba(255,255,255,.62); }

/* ============================================================
   12. Pricing
   ============================================================ */
.price-toggle {
	display: inline-flex; align-items: center; gap: 4px; margin: 30px auto 0;
	background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px;
}
.price-toggle button {
	border: 0; background: transparent; cursor: pointer;
	font-family: var(--font-sans); font-size: .88rem; font-weight: 600; color: var(--muted);
	padding: 8px 18px; border-radius: 999px; transition: all .25s var(--ease);
}
.price-toggle button.is-active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-xs); }
.price-toggle .save { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--brand); margin-left: 6px; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; align-items: start; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.plan {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 30px 26px; box-shadow: var(--shadow-xs); position: relative;
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan--featured {
	border-color: var(--brand); box-shadow: var(--shadow-lg);
	background: linear-gradient(180deg, var(--brand-50), var(--card) 42%);
}
.plan-flag {
	position: absolute; top: -12px; left: 26px;
	font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
	background: var(--brand); color: #fff; padding: 5px 11px; border-radius: 999px;
	box-shadow: 0 6px 14px -8px rgba(11,95,74,.9);
}
.plan h3 { font-size: 1.06rem; margin-bottom: .2em; }
.plan-desc { font-size: .89rem; color: var(--muted); margin-bottom: 20px; min-height: 2.6em; }
.plan-price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; }
.plan-price b { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 400; letter-spacing: -.03em; }
.plan-price span { font-size: .88rem; color: var(--muted); }
.plan-billed { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); letter-spacing: .04em; margin-bottom: 22px; }
.plan .btn { width: 100%; }
.plan-feats { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 11px; }
.plan-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: .91rem; color: var(--ink-2); }
.plan-feats svg { color: var(--brand); margin-top: 4px; flex: none; }

/* ============================================================
   13. FAQ
   ============================================================ */
.faq { max-width: 800px; margin: 48px auto 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
	font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em;
	transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary::after {
	content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 2px;
	background: var(--ink-2); transform: translateY(-50%); transition: transform .3s var(--ease-out);
}
.faq summary::before {
	content: ""; position: absolute; right: 13px; top: 50%; width: 2px; height: 12px;
	background: var(--ink-2); transform: translateY(-50%); transition: transform .3s var(--ease-out), opacity .3s;
}
.faq details[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq details[open] summary { color: var(--brand); }
.faq-a { padding: 0 44px 24px 0; color: var(--muted); font-size: .98rem; animation: faqIn .35s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ============================================================
   14. Quote
   ============================================================ */
.quote { max-width: 860px; margin-inline: auto; text-align: center; }
.quote blockquote {
	font-family: var(--font-display); font-size: clamp(1.5rem, 3.1vw, 2.15rem);
	line-height: 1.32; letter-spacing: -.015em; margin: 0 0 26px;
}
.quote-mark { font-family: var(--font-display); font-size: 4rem; line-height: .5; color: var(--brand-300); display: block; margin-bottom: 18px; }
.quote-by { display: inline-flex; align-items: center; gap: 12px; }
.quote-av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg, var(--brand), #12987a); display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .9rem; }
.quote-by div { text-align: left; }
.quote-by strong { display: block; font-size: .93rem; }
.quote-by span { font-size: .84rem; color: var(--muted); }

/* ============================================================
   15. CTA band
   ============================================================ */
.cta-band {
	background: linear-gradient(160deg, var(--brand-700) 0%, var(--brand) 45%, #12987a 100%);
	border-radius: var(--radius-xl); color: #fff; text-align: center;
	padding: clamp(46px, 6vw, 76px) clamp(24px, 4vw, 56px);
	position: relative; overflow: hidden;
}
.cta-band::before {
	content: ""; position: absolute; inset: 0;
	background-image: repeating-linear-gradient(to bottom, transparent 0 39px, rgba(255,255,255,.055) 39px 40px);
	pointer-events: none;
}
.cta-band h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: .3em; position: relative; }
.cta-band p { color: rgba(255,255,255,.78); max-width: 48ch; margin-inline: auto; margin-bottom: 30px; position: relative; }
.cta-band .btn { background: #fff; color: var(--brand-700); box-shadow: 0 14px 30px -16px rgba(0,0,0,.6); position: relative; }
.cta-band .btn:hover { background: var(--paper); color: var(--brand-700); }
.cta-band .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ============================================================
   16. Footer
   ============================================================ */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 76px) 0 0; margin-top: clamp(56px, 8vw, 104px); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px 28px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } }
.footer-about p { font-size: .93rem; color: var(--muted); max-width: 34ch; margin: 16px 0 20px; }
.footer-col h4 { font-family: var(--font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { font-size: .94rem; color: var(--ink-2); text-decoration: none; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--brand); }
.footer-bottom {
	margin-top: 48px; border-top: 1px solid var(--line); padding: 22px 0 26px;
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-size: .85rem; color: var(--muted);
}
.footer-bottom a { color: var(--muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--brand); }
.social { display: flex; gap: 8px; }
.social a {
	width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
	display: grid; place-items: center; background: var(--card); color: var(--ink-2);
	transition: all .25s var(--ease);
}
.social a:hover { color: var(--brand); border-color: var(--brand-300); transform: translateY(-2px); }

/* ============================================================
   17. Blog
   ============================================================ */
.page-head { padding: clamp(34px, 4vw, 56px) 0 0; position: relative; }
.page-head h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); letter-spacing: -.028em; margin-bottom: .25em; }
.page-head p { color: var(--muted); font-size: 1.08rem; max-width: 56ch; }

.postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
@media (max-width: 940px) { .postgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .postgrid { grid-template-columns: 1fr; } }

.card-post {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
	overflow: hidden; display: flex; flex-direction: column;
	box-shadow: var(--shadow-xs);
	transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card-post:hover { box-shadow: var(--shadow-md); border-color: var(--ink); }
.card-thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); position: relative; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.card-post:hover .card-thumb img { transform: scale(1.045); }
.card-thumb--blank {
	display: none;
}
.card-thumb--blank span { font-family: var(--font-display); font-size: 2.6rem; color: var(--brand-300); }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .78rem; color: var(--muted); margin-bottom: 10px; }
.card-meta a { color: var(--brand); text-decoration: none; }
.card-body h3 { font-size: 1.22rem; line-height: 1.25; margin-bottom: .5em; }
.card-body h3 a { color: inherit; text-decoration: none; }
.card-body h3 a:hover { color: var(--brand); }
.card-body p { font-size: .93rem; color: var(--muted); margin-bottom: 18px; }
.card-body .link-arrow { margin-top: auto; }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 52px; }
.pagination .page-numbers {
	min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 12px;
	border: 1px solid var(--line); border-radius: 12px; background: var(--card);
	color: var(--ink-2); text-decoration: none; font-size: .92rem; font-weight: 500;
	transition: all .25s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--brand-300); color: var(--brand); }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* single */
.article-head { max-width: var(--wrap-text); margin-inline: auto; text-align: center; padding-top: clamp(40px, 5vw, 68px); }
.article-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.025em; margin: .2em 0 .35em; }
.article-head .card-meta { justify-content: center; }
.article-hero { margin: 42px 0 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

.prose { max-width: var(--wrap-text); margin: 44px auto 0; font-size: 1.08rem; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-family: var(--font-display); font-size: 1.95rem; color: var(--ink); margin-top: 1.7em; letter-spacing: -.02em; }
.prose h3 { font-size: 1.28rem; color: var(--ink); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose img, .prose figure { border-radius: var(--radius); overflow: hidden; }
.prose blockquote {
	margin: 1.8em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--brand);
	font-family: var(--font-display); font-size: 1.4rem; line-height: 1.4; color: var(--ink);
}
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-2); padding: 2px 6px; border-radius: 5px; }
.prose pre { background: var(--ink); color: #e9efe9; padding: 20px; border-radius: var(--radius); overflow-x: auto; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose a { font-weight: 500; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; }

.article-foot { max-width: var(--wrap-text); margin: 52px auto 0; padding-top: 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tags a {
	font-family: var(--font-mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
	background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2);
	padding: 5px 10px; border-radius: 999px; text-decoration: none; transition: all .22s var(--ease);
}
.tags a:hover { border-color: var(--brand-300); color: var(--brand); }

/* ============================================================
   18. Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 64px); align-items: start; margin-top: 52px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.info-card {
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start;
	transition: border-color .3s var(--ease), transform .3s var(--ease-out);
}
.info-card + .info-card { margin-top: 14px; }
.info-card:hover { border-color: var(--brand-300); transform: translateX(3px); }
.info-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; flex: none; border: 1px solid var(--brand-100); }
.info-card h4 { font-size: .98rem; margin-bottom: .2em; }
.info-card p, .info-card a { font-size: .92rem; color: var(--muted); text-decoration: none; margin: 0; }
.info-card a:hover { color: var(--brand); }

.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.5vw, 38px); box-shadow: var(--shadow-md); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: grid; gap: 7px; margin-bottom: 16px; }
.form-field label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.form-field input, .form-field select, .form-field textarea {
	font-family: var(--font-sans); font-size: .97rem; color: var(--ink);
	background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
	padding: 12px 14px; width: 100%;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.form-field textarea { min-height: 148px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
	outline: none; background: var(--card); border-color: var(--brand);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: color-mix(in srgb, var(--muted) 65%, transparent); }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 14px; }

.notice { border-radius: 12px; padding: 14px 16px; font-size: .94rem; margin-bottom: 22px; display: flex; gap: 10px; align-items: flex-start; }
.notice svg { flex: none; margin-top: 3px; }
.notice--ok { background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); }
.notice--err { background: var(--clay-50); border: 1px solid color-mix(in srgb, var(--clay) 25%, transparent); color: var(--clay); }

/* ============================================================
   19. Reveal on scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* hero entrance */
.hero-copy > * { animation: heroIn .85s var(--ease-out) backwards; }
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .14s; }
.hero-copy > *:nth-child(3) { animation-delay: .23s; }
.hero-copy > *:nth-child(4) { animation-delay: .32s; }
.hero-copy > *:nth-child(5) { animation-delay: .41s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ============================================================
   20. WP core classes
   ============================================================ */
.alignleft { float: left; margin: .4em 1.6em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.6em; }
.aligncenter { margin-inline: auto; display: block; }
.alignwide { width: min(1080px, 92vw); margin-inline: auto; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.wp-caption-text, figcaption { font-size: .84rem; color: var(--muted); text-align: center; margin-top: 10px; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

/* ============================================================
   14. Display-type tuning
   DM Sans carries display sizes at weight 500 with heavy negative
   tracking — the Rubicflow treatment — rather than a serif at 400.
   ============================================================ */
.section-title,
.brand-name,
.proof-logo,
.step-no,
.stat b,
.card-thumb--blank span,
.prose h2,
.inv-top h4,
.plan-price b {
	font-weight: 500;
	letter-spacing: -.03em;
}

.quote blockquote,
.prose blockquote {
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1.45;
}

/* An oversized serif quotation mark set in Roboto just looks like a typo. */
.quote-mark { display: none; }

/* The eyebrow's uppercase mono + hairline pairing is a stock landing-page
   motif; keep the label, drop the decoration. */
.eyebrow { font-family: var(--font-sans); letter-spacing: .04em; font-weight: 500; text-transform: none; font-size: .82rem; }
.eyebrow::before,
.center .eyebrow::after { display: none; }


/* ============================================================
   15. Rubicflow-derived chrome
   ============================================================ */

/* Nav sits in its own white pill, current page filled dark. */
.nav ul {
	display: flex; align-items: center; gap: 2px;
	list-style: none; margin: 0; padding: 5px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
}
.nav a {
	display: block; padding: 9px 18px; border-radius: 999px;
	font-size: .93rem; color: var(--ink-2); text-decoration: none;
	transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav a:hover { background: var(--paper-3); color: var(--ink); }
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-parent > a {
	background: var(--brand); color: #fff;
}

/* Blog ------------------------------------------------------ */
.page-head { padding-bottom: 4px; }
.page-head p { margin-bottom: 0; }

.card-post { box-shadow: none; }
.card-body { padding: 24px 24px 26px; }
.card-meta a {
	color: var(--ink); text-decoration: none;
	background: var(--paper-3); border-radius: 999px;
	padding: 3px 10px; font-size: .74rem;
}
.card-meta a:hover { background: var(--accent); }
.card-meta > span[aria-hidden] { display: none; }
.card-meta time::after { content: " ·"; color: var(--line); }

/* Posts without a featured image lead with the title, not a placeholder. */
.card-post:not(:has(.card-thumb img)) .card-body { padding-top: 26px; }

.link-arrow { color: var(--ink); font-weight: 500; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.link-arrow:hover { color: var(--ink); }
.link-arrow::after { content: ""; display: block; width: 0; height: 1px; background: currentColor; transition: width .2s var(--ease); }
.link-arrow:hover::after { width: 16px; }

.pagination { margin-top: 44px; }
.pagination .page-numbers { border-radius: 4px; }

/* Single post ------------------------------------------------ */
.prose { font-size: 1.05rem; }

/* ============================================================
   16. Dark footer
   Charcoal slab, same value as Rubicflow's dark sections.
   ============================================================ */
.site-footer {
	background: var(--brand);
	border-top: 0;
	color: rgba(255, 255, 255, .72);
}

.site-footer .brand-name { color: #fff; }
.site-footer .brand-name em { color: var(--accent); }

/* The mark is charcoal-on-charcoal by default — invert it here.
   CSS stroke beats the SVG's presentation attribute. */
.site-footer .brand-mark { background: #fff; }
.site-footer .brand-mark svg { stroke: var(--ink); }

.footer-about p { color: rgba(255, 255, 255, .6); }

.footer-col h4 {
	font-family: var(--font-sans);
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .45);
}

.footer-col a { color: rgba(255, 255, 255, .78); }
.footer-col a:hover { color: #fff; }

.footer-bottom {
	border-top-color: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .5);
}
.footer-bottom a { color: rgba(255, 255, 255, .5); }
.footer-bottom a:hover { color: #fff; }

.social a {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .18);
	color: rgba(255, 255, 255, .8);
	transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.social a:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--ink);
	transform: none;
}

/* ============================================================
   18. Blog: search, feature post, empty state
   ============================================================ */
.blog-search { margin-top: 22px; }

.search-form {
	display: flex;
	align-items: stretch;
	gap: 0;
	max-width: 420px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.search-form:focus-within { border-color: var(--ink); }

.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: .95rem;
	color: var(--ink);
	padding: 12px 14px;
	appearance: none;
}
.search-form input[type="search"]:focus { outline: none; }
.search-form input[type="search"]::placeholder { color: var(--muted); }

.search-form button {
	border: 0;
	background: var(--brand);
	color: #fff;
	padding: 0 16px;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color .15s var(--ease);
}
.search-form button:hover { background: var(--accent); color: var(--ink); }

/* The newest post, full width ------------------------------- */
.card-feature {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	margin-top: 30px;
}
.card-feature .card-thumb {
	aspect-ratio: auto;
	height: 100%;
	min-height: 280px;
}
.card-feature .card-body {
	padding: clamp(26px, 3.2vw, 46px);
	justify-content: center;
}
.card-feature h2 {
	font-size: clamp(1.55rem, 2.7vw, 2.25rem);
	margin-bottom: .4em;
}
.card-feature h2 a { color: inherit; text-decoration: none; }
.card-feature h2 a:hover { color: var(--ink-2); }
.card-feature p {
	font-size: 1.02rem;
	color: var(--muted);
	max-width: 52ch;
	margin-bottom: 22px;
}
.card-flag {
	display: inline-flex;
	align-self: flex-start;
	background: var(--accent);
	color: var(--ink);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .11em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 2px;
	margin-bottom: 14px;
}

@media (max-width: 860px) {
	.card-feature { grid-template-columns: 1fr; }
	.card-feature .card-thumb { min-height: 0; aspect-ratio: 16 / 9; }
}

/* Grid sits under the feature, so it needs its own breathing room. */
.card-feature + .postgrid { margin-top: 24px; }

/* Empty search ---------------------------------------------- */
.noresults {
	margin: 40px 0 0;
	padding: clamp(36px, 5vw, 64px);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	text-align: center;
}
.noresults h2 { font-size: 1.6rem; margin-bottom: .4em; }
.noresults p { color: var(--muted); max-width: 46ch; margin: 0 auto 24px; }

/* ============================================================
   19. Front-page supporting content
   ============================================================ */
.seo-steps {
	list-style: none;
	counter-reset: step;
	margin: 34px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.seo-steps li {
	counter-increment: step;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.seo-steps h3 { font-size: 1.1rem; margin-bottom: .4em; }
.seo-steps p { color: var(--muted); font-size: .95rem; margin: 0; }

/* Step figure: a scaled-down render of the actual app screen, drawn as
   inline SVG so it stays crisp, needs no extra request, and keeps its
   labels as real selectable text. */
.seo-step-figure {
	margin: 0;
	padding: 18px 18px 0;
	background: var(--paper-2);
	border-bottom: 1px solid var(--line-soft);
}
.seo-step-figure .pv {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--font-sans);
}
.seo-step-cap {
	padding: 11px 4px 13px;
	font-size: .76rem;
	line-height: 1.45;
	color: var(--muted);
}
.seo-step-body { padding: 22px 26px 26px; }
.seo-step-body::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--ink);
	font-size: .9rem;
	font-weight: 500;
	margin-bottom: 14px;
}

/* Shared paint classes for the step figures, so the drawings inherit the
   same tokens as the rest of the page instead of hard-coded hexes. */
.pv-sheet  { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.pv-card   { fill: var(--card); }
.pv-zone   { fill: var(--paper-3); }
.pv-line   { fill: var(--line); }
.pv-ink    { fill: var(--ink); }
.pv-muted  { fill: var(--muted); }
.pv-faint  { fill: var(--brand-300); }
.pv-accent { fill: var(--accent); }
.pv-brand  { fill: var(--brand); }
.pv-invert { fill: var(--paper-2); }
.pv-total  { fill: var(--ink); font-weight: 700; }
.pv-hair   { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.pv-dash   { fill: var(--paper-3); stroke: var(--brand-300); stroke-width: 1.2; stroke-dasharray: 5 4; }
.pv-arrow  { fill: none; stroke: var(--brand-300); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pv-stroke-accent { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.pv-on-brand { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pv-chip   { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.pv-link   { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.pv-swatch-ring { fill: none; stroke: var(--line); stroke-width: 1; }

/* About Parchilo: an editorial two-column split — the title and audience
   hold the left rail, the prose runs down a narrower measure on the right
   so the paragraphs stay readable instead of spanning the full wrap. */
.about-grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.about-aside .section-title { margin-bottom: 0; }

.about-who {
	margin: 28px 0 12px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}
.about-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.about-chips li {
	padding: 7px 12px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: .84rem;
	color: var(--ink-2);
}

.about-body p { margin: 0 0 1.05em; color: var(--muted); }
.about-body p:last-child { margin-bottom: 0; }
.about-body .about-intro {
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.5;
	color: var(--ink);
	margin-bottom: 1.2em;
}
.about-body .about-close {
	margin-top: 1.5em;
	padding-top: 1.3em;
	border-top: 1px solid var(--line);
	color: var(--ink-2);
	font-weight: 500;
}

@media (max-width: 860px) {
	.about-grid { grid-template-columns: 1fr; gap: 26px; }
}

.seo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 34px;
}
.seo-item h3 { font-size: 1.05rem; margin-bottom: .35em; }
.seo-item p { color: var(--muted); font-size: .95rem; margin: 0; }

.faq { margin-top: 30px; display: grid; gap: 22px; }
.faq-item h3 { font-size: 1.06rem; margin-bottom: .3em; }
.faq-item p { color: var(--muted); margin: 0; }

.seo-links { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.seo-links a { color: var(--ink); text-decoration: none; font-weight: 500; }
.seo-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
	.seo-steps, .seo-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.seo-steps, .seo-grid { grid-template-columns: 1fr; }
}

/* Brand mark using the uploaded logo image.
   The logo is accent yellow, so it sits on the dark brand square in the
   header and directly on the dark footer with no plate behind it. */
.brand-mark img {
	width: 22px; height: 22px;
	display: block;
	object-fit: contain;
}
.site-footer .brand-mark { background: transparent; }
.site-footer .brand-mark img { width: 30px; height: 30px; }

/* ------------------------------------------------------------------
 * FAQ — accordion built on <details>/<summary>.
 *
 * Numbered like invoice line items, which is the metaphor the rest of
 * the site runs on. Supersedes both the older .faq rules further up
 * (the marketing-page accordion at ~L667 and the flat grid at ~L1189);
 * the legacy ::before/::after plus-minus is switched off below so it
 * cannot double up with .faq-sign.
 * ---------------------------------------------------------------- */

.faq-eyebrow,
.about-eyebrow {
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 10px;
}

.faq {
	display: block;
	max-width: none;
	margin: 34px 0 0;
	border-top: 1px solid var(--line);
}

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 2px;
	transition: color .2s var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }

/* Kill the legacy absolutely-positioned plus/minus. */
.faq summary::before,
.faq summary::after { content: none; }

.faq-item > summary:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.faq-n {
	flex: none;
	font-family: var(--font-mono);
	font-size: .72rem;
	line-height: 1.9;
	letter-spacing: .06em;
	color: var(--brand-300);
	transition: color .2s var(--ease);
}

.faq-q {
	flex: 1;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -.01em;
}

.faq-sign {
	flex: none;
	position: relative;
	width: 13px;
	height: 13px;
	margin-top: .38em;
}
.faq-sign::before,
.faq-sign::after {
	content: "";
	position: absolute;
	background: var(--ink-2);
	transition: transform .3s var(--ease-out), opacity .3s var(--ease);
}
.faq-sign::before {
	left: 0; top: 50%;
	width: 13px; height: 1.5px;
	transform: translateY(-50%);
}
.faq-sign::after {
	top: 0; left: 50%;
	width: 1.5px; height: 13px;
	transform: translateX(-50%);
}

.faq-item > summary:hover .faq-q { color: var(--brand); }
.faq-item > summary:hover .faq-n { color: var(--ink-2); }

.faq-item[open] > summary .faq-q { color: var(--brand); }
.faq-item[open] > summary .faq-n { color: var(--accent-600); }
.faq-item[open] > summary .faq-sign::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }

.faq-a {
	padding: 0 2px 22px 45px;
	color: var(--muted);
	font-size: .98rem;
	line-height: 1.65;
	animation: faqIn .35s var(--ease-out);
}
.faq-a p { margin: 0; max-width: 62ch; }

@media (max-width: 600px) {
	.faq-item > summary { gap: 12px; padding: 17px 2px; }
	.faq-q { font-size: 1rem; }
	.faq-a { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.faq-a { animation: none; }
	.faq-sign::before,
	.faq-sign::after { transition: none; }
}

/* ------------------------------------------------------------------
 * Invoice preview table — numeric header alignment.
 *
 * Fixes a specificity collision in the Parchilo App plugin's CSS:
 *
 *   .pa-doc-table th { text-align: left; }   (0,1,1)
 *   .pa-num          { text-align: right; }  (0,1,0)
 *
 * On a `th.pa-num` the element-qualified `th` rule outranks `.pa-num`,
 * so the Qty / Unit / Amount headings render left while the figures
 * beneath them render right. Only the numeric headers are corrected —
 * the Description column stays left, matching its cells.
 *
 * This belongs in the plugin's own stylesheet; it lives here because
 * plugin files are not editable through the theme workflow. Remove it
 * if the plugin is ever fixed at source.
 * ---------------------------------------------------------------- */
.pa-doc-table th.pa-num { text-align: right; }

/* ----------------------------------------------------------------
 * Editor field-group headings ("From", "Bill to", "Details", "Line
 * items", "Adjustments", "Notes").
 *
 * The plugin styles these legends at .76rem in muted grey at normal
 * weight, which makes them read as captions rather than as the section
 * heads they are. Promoted here to ink-coloured bold with an amber
 * leading rule, so each group announces itself on scan.
 *
 * Scoped as `.pa .pa-field-group legend` (0,2,1) purely to outrank the
 * plugin's `.pa-field-group legend` (0,1,1) — the plugin stylesheet
 * loads after this one, so matching specificity would lose. No
 * !important needed.
 *
 * This belongs in the plugin's own stylesheet; it lives here because
 * plugin files are not editable through the theme workflow.
 * ---------------------------------------------------------------- */
.pa .pa-field-group legend {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .84rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink);
	padding: 0 8px 0 6px;
}
.pa .pa-field-group legend::before {
	content: "";
	flex: none;
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: var(--accent);
}

/* ----------------------------------------------------------------
 * Print override for the invoice export.
 *
 * The plugin's print stylesheet hides the page with:
 *
 *   body * { visibility: hidden !important; }
 *
 * `visibility: hidden` hides the paint but KEEPS every box in the
 * layout. So the header, the full-height editor form, the how-to
 * section, the FAQ and the footer all still generate their height on
 * the printed document — which is where the four trailing blank pages
 * came from. The beige on those pages is the <body> canvas background
 * (--paper), which visibility cannot suppress because the canvas
 * background propagates outside the element tree.
 *
 * Fix: take the non-invoice boxes out of layout entirely with
 * display:none, keeping only the sheet's own ancestor chain, and force
 * the canvas white. :has() lets us select the ancestor chain without
 * hard-coding it, so this keeps working if the plugin's markup moves.
 *
 * Specificity, not order, is what makes these win: the plugin's rules
 * are !important but only (0,0,1), while these carry an id-weighted
 * :has()/:not() and land far above that. On a browser without :has()
 * support nothing here matches and the plugin's original behaviour is
 * left untouched.
 *
 * This belongs in the plugin's own stylesheet; it lives here because
 * plugin files are not editable through the theme workflow.
 * ---------------------------------------------------------------- */
@media print {
	html, body {
		background: #fff !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Every element that is neither part of the sheet nor an ancestor of it. */
	body *:not(:has(#parchilo-print)):not(#parchilo-print):not(#parchilo-print *) {
		display: none !important;
	}

	/* The ancestor chain survives, stripped of its own layout and chrome so
	   it contributes no width, height, padding or background of its own. */
	body :has(#parchilo-print) {
		display: block !important;
		position: static !important;
		width: auto !important;
		max-width: none !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	/* The plugin pulls the sheet out of flow with position:absolute, which is
	   only needed while the rest of the page still occupies space. */
	#parchilo-print {
		position: static !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
	}

	#parchilo-print .pa-doc {
		box-shadow: none !important;
		border-radius: 0 !important;
	}

	/* Long invoices: never split a line item or the totals across a page. */
	#parchilo-print tr,
	#parchilo-print .pa-doc-totals,
	#parchilo-print .pa-doc-notes { break-inside: avoid; }

	#parchilo-print thead { display: table-header-group; }
}