/*
Theme Name: DayFilter
Theme URI: https://dayfilter.app
Author: The Slide Factory
Description: Marketing site theme for DayFilter. Every section of the landing page is a block pattern made of editable blocks, so you can change the copy on any page and reuse sections on new pages.
Version: 1.13.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dayfilter
*/

/* ---------- Tokens ---------- */
/* Near-monochrome neutrals. Indigo is a single accent: logo, focus ring, pill dot and product UI. */
:root {
	--df-display: Inter, system-ui, sans-serif;
	--df-ink: #1a1c1f;
	--df-body: #707277;
	--df-body-2: #3c3e43;
	--df-accent: #4f46e5;
	--df-indigo: #4f46e5;
	--df-indigo-hover: #4338ca;
	--df-bg: #f4f4f5;
	--df-off: #f9f9fa;
	--df-line: #e4e5e8;
	--df-line-2: #d4d6db;
	--df-navy: #0b0b0b;
	--df-navy-2: #141416;
	--df-navy-line: #26272b;
	--df-navy-text: #c9cacd;
	--df-navy-muted: #8a8c91;
	--df-lilac: #c9cacd;
	--df-btn: #1d1e21;
	--df-btn-border: #34363b;
	--df-btn-hover: #2b2c30;
	--df-green: #166534;
	--df-green-soft: #e5f6ec;
	--df-amber: #8a5a00;
	--df-amber-soft: #fdf3dc;
	--df-red: #b91c1c;
	--df-red-soft: #fdeaea;
	--df-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
	--df-section-y: clamp(72px, 9vw, 112px);
	--df-radius: 12px;
	--df-radius-lg: 16px;
	--df-shadow-card: none;
	/* Pale sky fading into contour lines, for light bands and mockup panels. */
	--df-contour: url(assets/img/contour.webp) 50% 100% / cover no-repeat, #fff;
	--df-day-line: #e3e9f1;
	--df-shadow-float: 0 0 0 1px #e4e5e8, 0 2px 4px rgba(16, 17, 20, 0.04), 0 24px 48px -16px rgba(16, 17, 20, 0.12);
}

/* ---------- Base ---------- */
body {
	margin: 0;
	background: #fff;
	color: var(--df-ink);
	font-family: var(--df-display);
	font-optical-sizing: auto;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
/* Keep anchor targets clear of the sticky header (60px + admin bar). */
html { scroll-padding-top: calc(72px + var(--wp-admin--admin-bar--height, 0px)); }
a { color: var(--df-ink); text-decoration-line: underline; text-decoration-color: var(--df-line-2); text-underline-offset: 3px; }
a:hover { color: var(--df-ink); text-decoration-color: currentColor; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--df-accent); outline-offset: 2px; }
code { font-family: var(--df-mono); }
.df-main { display: block; }

/* ---------- Layout helpers ---------- */
.df-wrap { max-width: 1248px; margin-left: auto !important; margin-right: auto !important; padding-left: 24px; padding-right: 24px; }
.df-section { padding-top: clamp(80px, 10vw, 136px); padding-bottom: var(--df-section-y); }
.df-flush-top { padding-top: 0; }
.df-flush-bottom { padding-bottom: 0; }
.df-pad-bottom-sm { padding-bottom: 64px; }
.df-band-off { background: var(--df-off); border-top: 1px solid var(--df-line); border-bottom: 1px solid var(--df-line); }
.df-band-navy { background: var(--df-navy); color: var(--df-navy-text); position: relative; }
/* Full-bleed near-black band on a max-width section, without extra wrapper markup. */
.df-dark { position: relative; background: var(--df-navy); color: var(--df-navy-text); box-shadow: 0 0 0 100vmax var(--df-navy); clip-path: inset(0 -100vmax); }
/* White product mockups inside the dark band keep dark text. */
.df-dark [style*="background: #ffffff"] { color: var(--df-ink); }
.df-head { max-width: 720px; }
.df-center { text-align: center; }
.df-center.df-head, .df-center .df-head { margin-left: auto; margin-right: auto; }
.df-gap-top { margin-top: clamp(36px, 4vw, 48px) !important; }

.df-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.df-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 24px; }
/* Ruled grid: cells separated by 1px hairlines instead of gaps and shadows. */
.df-grid--ruled { gap: 1px; background: var(--df-line); border: 1px solid var(--df-line); border-radius: var(--df-radius); overflow: hidden; }
.df-grid--ruled.df-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.df-grid--ruled > * { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff; margin: 0 !important; }
.df-dark .df-grid--ruled, .df-band-navy .df-grid--ruled { background: var(--df-navy-line); border-color: var(--df-navy-line); }
.df-dark .df-grid--ruled > *, .df-band-navy .df-grid--ruled > * { background: var(--df-navy-2); }
.df-split { display: flex; flex-wrap: wrap; gap: 48px 72px; align-items: center; }
.df-split > * { flex: 1 1 400px; min-width: 0; margin: 0 !important; }
.df-split--reverse { flex-wrap: wrap-reverse; }
.df-split--inset { padding-left: clamp(0px, 3vw, 48px); padding-right: clamp(0px, 3vw, 48px); }

/* ---------- Type ---------- */
.df-eyebrow { display: inline-flex; align-items: center; height: 24px; margin: 0; padding: 0 8px; border-radius: 8px; background: var(--df-bg); font-size: 13px; font-weight: 500; color: var(--df-body-2); }
.df-band-off .df-eyebrow { background: #fff; box-shadow: inset 0 0 0 1px var(--df-line); }
.df-band-navy .df-eyebrow, .df-dark .df-eyebrow { background: rgba(255,255,255,0.06); color: var(--df-navy-text); }
.df-eyebrow + .df-h2 { margin-top: 16px; }
.df-h1 { margin: 20px auto 0; max-width: 900px; font-weight: 600; font-size: clamp(42px, 5.6vw, 64px); line-height: 1; letter-spacing: -0.02em; }
.df-h2 { margin: 8px 0 0; max-width: 18em; font-weight: 500; font-size: clamp(30px, calc(1.6vw + 18px), 40px); line-height: 1.1; letter-spacing: -0.02em; }
.df-center .df-h2 { margin-left: auto; margin-right: auto; }
/* Two-tone headings: the continuation after the first sentence is muted. */
.has-muted-color { color: var(--df-body); }
.df-h2 .has-muted-color { color: var(--df-body) !important; }
/* Never larger than the H1. */
.df-h2--display { margin-top: 24px; max-width: 14em; font-size: clamp(40px, 4.4vw, 56px); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em; }
.df-dark .df-h2--display { margin-left: auto; margin-right: auto; }
.df-h2--display + .df-lede { margin-top: 24px; max-width: 520px; }
.df-dark .df-pill--dark { background: rgba(255,255,255,0.04); border-color: var(--df-navy-line); color: var(--df-navy-text); }
.df-dark .df-pill--dark:hover { background: rgba(255,255,255,0.06); }
/* Night scene for the run of dark sections: the night-sky image across the top of the first one, with
   a twinkling star layer over its sky. The image fades to black, which the rest of the run carries on. */
.df-dark, .df-band-navy { --df-navy: #000; --df-navy-2: #0c0d14; --df-navy-line: #1f2130; --df-btn-border: #2a2c3a; }
.df-dark > *, .df-band-navy > * { position: relative; z-index: 1; }
/* Full-width navy bands (sub pages) get the same night sky. */
.df-band-navy { overflow: hidden; background: url(assets/img/night-sky.webp) 50% 0 / max(100%, 1100px) auto no-repeat, var(--df-navy); }
.df-band-navy::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: url(assets/img/stars-b.svg) 40px 30px / 340px 340px; -webkit-mask-image: linear-gradient(#000 max(12vw, 130px), transparent max(19vw, 210px)); mask-image: linear-gradient(#000 max(12vw, 130px), transparent max(19vw, 210px)); animation: df-twinkle 5s ease-in-out infinite alternate; }
.df-dark:not(.df-dark + .df-dark)::before, .df-dark:not(.df-dark + .df-dark)::after { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none; }
.df-dark:not(.df-dark + .df-dark)::before { background: url(assets/img/night-sky.webp) 50% 0 / max(100%, 1100px) auto no-repeat; }
.df-dark:not(.df-dark + .df-dark)::after { background: url(assets/img/stars-b.svg) 40px 30px / 340px 340px; -webkit-mask-image: linear-gradient(#000 max(12vw, 130px), transparent max(19vw, 210px)); mask-image: linear-gradient(#000 max(12vw, 130px), transparent max(19vw, 210px)); animation: df-twinkle 5s ease-in-out infinite alternate; }
.df-main { overflow-x: clip; }
/* Full-bleed layers inside narrow mains (text pages) must not widen the page. */
body { overflow-x: clip; }
/* Dawn after the night: a warm glow coming up behind the next section. */
.df-dark + .df-band-plain { background: radial-gradient(60% 420px at 80% 0, rgba(255,214,150,0.28), transparent 70%), linear-gradient(#fdf8ee, #fff 360px); }
/* Light band: pale sky fading into soft contour lines. */
.df-band-off { position: relative; overflow: hidden; background: var(--df-contour); border-color: transparent; }
.df-band-off > * { position: relative; z-index: 1; }
.df-h2--card { font-size: 28px; line-height: 1.15; }
.df-h2--cta { margin-top: 0; font-size: clamp(32px, calc(3vw + 12px), 48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--df-ink); }
.df-band-navy .df-h2, .df-dark .df-h2 { color: #fff; }
.df-band-navy .has-muted-color, .df-dark .has-muted-color, .df-dark .df-h2 .has-muted-color { color: var(--df-navy-muted) !important; }
.df-h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; }
.df-lede { margin: 20px 0 0; max-width: 560px; font-size: 18px; line-height: 1.5; color: var(--df-body); }
.df-split .df-lede { max-width: 480px; }
.df-center .df-lede { margin-left: auto; margin-right: auto; }
.df-band-navy .df-lede, .df-dark .df-lede { color: var(--df-navy-muted); }
.df-text { margin: 0; font-size: 15px; color: var(--df-body); }
.df-note { margin: 16px 0 0; font-size: 13px; color: var(--df-body); }
.df-dark .df-note a { color: #fff; text-decoration-color: var(--df-btn-border); }
.df-caption { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--df-body); }
.df-mono-label { margin: 0; font-family: var(--df-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--df-body); }
mark.has-inline-color { background: transparent; }

/* ---------- Buttons ---------- */
.df-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.df-center .df-actions, .df-hero__copy .df-actions, .df-actions.is-content-justification-center { justify-content: center; }
.df-actions--tight { margin-top: 24px; }
.wp-block-button.df-btn-primary .wp-block-button__link,
.wp-block-button.df-btn-ghost .wp-block-button__link,
.wp-block-button.df-btn-dark .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 10px;
	font-size: 14px; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; transition: background 0.15s ease-out;
}
.wp-block-button.df-btn-primary .wp-block-button__link { background: var(--df-btn); color: #fff; border: 1px solid var(--df-btn-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.wp-block-button.df-btn-primary .wp-block-button__link:hover { background: var(--df-btn-hover); color: #fff; }
.wp-block-button.df-btn-ghost .wp-block-button__link { background: #fff; color: var(--df-ink); border: 1px solid var(--df-line-2); }
.wp-block-button.df-btn-ghost .wp-block-button__link:hover { background: var(--df-off); }
.wp-block-button.df-btn-dark .wp-block-button__link { background: transparent; color: #fff; border: 1px solid var(--df-btn-border); }
.wp-block-button.df-btn-dark .wp-block-button__link:hover { background: rgba(255,255,255,0.06); }
.df-hero .wp-block-button__link { min-height: 40px !important; }
@media (pointer: coarse) {
	.wp-block-button.df-btn-primary .wp-block-button__link,
	.wp-block-button.df-btn-ghost .wp-block-button__link,
	.wp-block-button.df-btn-dark .wp-block-button__link { min-height: 44px; }
}

/* ---------- Announcement + header ---------- */
.df-announce { background: var(--df-navy); color: #a0a2a7; font-size: 13px; font-weight: 500; text-align: center; padding: 8px 16px; }
.df-announce p { margin: 0; }
.df-announce strong { color: #fff; font-weight: 500; }
.df-announce a { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: #4a4c52; text-underline-offset: 3px; }
.df-announce a:hover { color: #fff; text-decoration-color: #fff; }
header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
.df-header { background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--df-line); }
.df-header nav { max-width: 1248px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.df-header__left { display: flex; align-items: center; gap: 32px; }
.df-logo { display: flex; align-items: center; text-decoration: none; color: var(--df-ink); min-height: 44px; }
.df-wordmark { display: block; flex: none; height: auto; }
.df-logo:hover { color: var(--df-ink); }
.df-nav-links { display: flex; gap: 2px; font-size: 14px; font-weight: 500; }
.df-nav-links a { color: var(--df-body-2); text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.df-nav-links a:hover { background: var(--df-bg); color: var(--df-ink); }
.df-header__right { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.df-header__login, .df-header__cta { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.df-header__login { color: var(--df-ink); background: #fff; border: 1px solid var(--df-line-2); }
.df-header__login:hover { background: var(--df-off); }
.df-header__cta { background: var(--df-btn); color: #fff !important; border: 1px solid var(--df-btn-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
.df-header__cta:hover { background: var(--df-btn-hover); }

/* ---------- Hero ---------- */
/* Sky scene: the hero slides up under the 61px header, which stays clear while the page is at the top. */
.df-hero { position: relative; overflow: hidden; padding-top: 61px; --df-sky-h: max(880px, 47.7vw); --df-sky-x: 72%; --df-hero-gap: clamp(56px, 6vw, 88px); }
/* Outranks WP's `:root :where(.is-layout-flow) > :first-child` reset (0,2,0) so the hero slides under the header. */
:root .df-hero.df-hero { margin-top: -61px; }
.df-hero > * { position: relative; z-index: 1; }
/* Sky, sun and mountains. Settles in on load and drifts a little slower than the page on scroll. */
.df-hero::before, .df-hero::after { content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; height: var(--df-sky-h); pointer-events: none; }
.df-hero::before { background: url(assets/img/hero-sky.webp) var(--df-sky-x) 0 / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); transform-origin: var(--df-sky-x) 50%; animation: df-sky-in 2.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* The image's own two clouds, drawn in the same 1816x866 frame so they line up, drifting slowly. */
.df-hero::after { left: -80px; right: -80px; background: url(assets/img/hero-clouds.svg) var(--df-sky-x) 0 / cover no-repeat; --df-drift-from: -50px; --df-drift-to: 70px; animation: df-fade-in 2s ease-out 0.4s both, df-drift 38s ease-in-out infinite alternate; }
/* Two more soft clouds at their own speeds, in front of the sky and behind the copy. */
.df-hero__copy::before, .df-hero__copy::after { content: ""; position: absolute; z-index: -1; pointer-events: none; aspect-ratio: 3 / 1; background: url(assets/img/cloud.svg) center / contain no-repeat; }
.df-hero__copy::before { width: 170px; left: 4%; top: 58%; opacity: 0.75; --df-drift-to: 140px; animation: df-drift 30s ease-in-out infinite alternate; }
.df-hero__copy::after { width: 120px; right: 4%; top: 12%; opacity: 0.6; --df-drift-to: -120px; animation: df-drift 42s ease-in-out -12s infinite alternate; }
.df-hero__copy > * { position: relative; z-index: 1; }
.df-hero__copy { padding-top: var(--df-hero-gap); text-align: center; }
/* Copy and product shot rise in one after another. */
.df-hero__copy > *, .df-hero .df-stage-wrap { animation: df-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.df-hero__copy > :nth-child(2) { animation-delay: 0.08s; }
.df-hero__copy > :nth-child(3) { animation-delay: 0.16s; }
.df-hero__copy > :nth-child(4) { animation-delay: 0.24s; }
.df-hero .df-stage-wrap { animation-duration: 1.2s; animation-delay: 0.34s; }
@keyframes df-sky-in { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }
@keyframes df-fade-in { from { opacity: 0; } }
/* Distance comes from --df-drift-from / --df-drift-to on each element. */
@keyframes df-drift { from { transform: translateX(var(--df-drift-from, 0px)); } to { transform: translateX(var(--df-drift-to, 90px)); } }
@keyframes df-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes df-twinkle { from { opacity: 0.25; } to { opacity: 1; } }
/* Where supported, the sky lags behind the page as you scroll. */
@supports (animation-timeline: scroll()) {
	@keyframes df-sky-parallax { to { translate: 0 22%; } }
	.df-hero::before { animation-name: df-sky-in, df-sky-parallax; animation-duration: 2.4s, 1ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), linear; animation-fill-mode: both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
	.df-hero::after { animation-name: df-fade-in, df-drift, df-sky-parallax; animation-duration: 2s, 38s, 1ms; animation-timing-function: ease-out, ease-in-out, linear; animation-delay: 0.4s, 0s, 0s; animation-iteration-count: 1, infinite, 1; animation-direction: normal, alternate, normal; animation-fill-mode: both; animation-timeline: auto, auto, scroll(root); animation-range: normal, normal, 0 100vh; }
}
@media (prefers-reduced-motion: reduce) {
	.df-hero::before, .df-hero::after, .df-hero__copy::before, .df-hero__copy::after, .df-hero__copy > *, .df-hero .df-stage-wrap,
	.df-dark::after, .df-band-navy::after, .df-mcp-hero__grid > *, .df-prose::before, .df-cta-band::before, .df-cta-band::after { animation: none !important; }
}
/* Header goes clear over the sky until the page scrolls (site.js sets .df-at-top). */
.df-header { transition: background-color 0.3s ease-out, border-color 0.3s ease-out, backdrop-filter 0.3s ease-out; }
.df-at-top body:is(:has(.df-hero), :has(main.df-prose)) .df-header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.df-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--df-line), rgba(99,102,241,0.55)) border-box; border: 1px solid transparent; border-radius: 999px; padding: 4px 12px 4px 10px; font-size: 13px; font-weight: 500; color: var(--df-ink); }
.df-pill::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--df-accent); }
.df-pill a { color: inherit; text-decoration: none; }
.df-pill:hover { background: var(--df-off); }
/* Hero eyebrow: frosted glass over the sky, the brand mark in a navy disc, and a soft second half after a hairline. */
.df-hero .df-pill, .df-hero .df-pill:hover { position: relative; gap: 10px; padding: 7px 16px 7px 40px; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.25)); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255,255,255,0.8); box-shadow: inset 0 1px 0 #fff, 0 8px 24px -12px rgba(52,80,124,0.45); font-size: 14px; color: #16213a; }
.df-hero .df-pill::before { position: absolute; left: 7px; top: 50%; width: 24px; height: 24px; margin-top: -12px; background: #16213a; }
.df-hero .df-pill::after { content: ""; position: absolute; left: 13px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: #fff; -webkit-mask: url(assets/brand/dayfilter-mark.svg) center / contain no-repeat; mask: url(assets/brand/dayfilter-mark.svg) center / contain no-repeat; }
.df-pill__soft { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; color: #52637f; }
.df-pill__soft::before { content: ""; width: 1px; height: 14px; background: rgba(22,33,58,0.18); }
/* The H1 breaks after its first sentence with a <br>; the width just keeps each line on one row. */
.df-hero__copy .df-h1 { max-width: 16em; text-wrap: wrap; margin-top: 24px; font-size: clamp(44px, calc(4.4vw + 6px), 68px); line-height: 1.12; letter-spacing: -0.035em; font-weight: 700; color: #16213a; }
/* Second line of the hero H1: lighter weight in a soft sky blue, like a horizon under the bold first line. */
.df-hero__copy .df-h1 .df-h1__soft { font-weight: 400; color: #34507c; letter-spacing: -0.03em; }
.df-hero__copy .df-lede { max-width: 40em; margin: 16px auto 0; line-height: 1.4; }
.df-hero__copy .df-actions { margin-top: 32px; }
.df-hero .df-note { margin-top: 16px; }
.df-stage-wrap { margin-top: 64px; }
.df-hero .df-stage-wrap { margin-top: var(--df-hero-gap); }
.df-stage { background: rgba(255,255,255,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.8); border-bottom: 0; border-radius: 16px 16px 0 0; padding: 10px 10px 0; box-shadow: var(--df-shadow-float); }

/* ---------- Works with ---------- */
/* Ruled grid of providers: equal cells aligned to the hero stage above. Text, not logos, so it never reads as endorsement. */
.df-logos-band { border-top: 1px solid var(--df-line); background: #fff; }
.df-logos { padding-top: 40px; padding-bottom: 56px; text-align: center; }
.df-logos__label { margin: 0 0 20px; font-size: 13px; font-weight: 500; color: var(--df-body); }
.df-logos__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--df-line); border-left: 1px solid var(--df-line); }
.df-logos__list li { margin: 0; min-height: 96px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid var(--df-line); border-bottom: 1px solid var(--df-line); font-family: var(--df-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--df-body); }
.df-logos__list strong { font-family: var(--df-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; color: var(--df-body-2); }
.df-logos__list li:nth-child(n+7) { background: var(--df-off); }

/* ---------- Problem cards ---------- */
.df-problem-card { background: #fff; display: flex; flex-direction: column; }
.df-problem { padding: 28px 28px 0; }
.df-problem p { margin: 0; font-size: 13px; font-weight: 500; color: var(--df-body); display: flex; gap: 8px; align-items: center; }
.df-problem p::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--df-line-2); }
.df-answer { padding: 10px 28px 32px; }

/* ---------- Panels, bullets, callouts ---------- */
.df-panel { background: var(--df-contour); border: 1px solid var(--df-day-line); border-radius: var(--df-radius-lg); padding: clamp(24px, 5vw, 64px); }
/* Grey canvas behind a product mockup; the text beside it stays on the page background. */
.df-canvas { background: var(--df-contour); border: 1px solid var(--df-day-line); border-radius: var(--df-radius-lg); padding: clamp(24px, 4vw, 48px); min-height: 440px; display: flex; flex-direction: column; justify-content: center; }
.df-dark .df-canvas { background: var(--df-navy-2); border-color: var(--df-navy-line); }
.df-dark .df-panel { background: var(--df-navy-2); border-color: var(--df-navy-line); color: var(--df-navy-text); }
.df-bullets { margin-top: 28px; display: grid; gap: 14px; }
.df-bullet { position: relative; padding-left: 46px; min-height: 32px; }
.df-bullet::before { content: ""; position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--df-line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h6'/%3E%3C/svg%3E") center / 16px no-repeat; }
.df-bullet + .df-bullet::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1015.5-6.2M21 4v5h-5'/%3E%3C/svg%3E"); }
.df-bullet h3 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.df-bullet p { margin: 0; font-size: 14px; color: var(--df-body); }
.df-callout { position: relative; margin: 24px 0 0; background: #fff; border: 1px solid var(--df-line); border-radius: 10px; padding: 14px 16px 14px 58px; font-size: 14px; color: var(--df-body-2); }
.df-callout::before { content: ""; position: absolute; left: 14px; top: 12px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--df-line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6l7-3z'/%3E%3C/svg%3E") center / 16px no-repeat; }
.df-dark .df-callout { background: transparent; border-color: var(--df-navy-line); color: var(--df-navy-text); }

/* ---------- Tiles and feature cards ---------- */
.df-tile, .df-feature { background: #fff; border: 1px solid var(--df-line); border-radius: var(--df-radius); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.df-tile > div[aria-hidden="true"], .df-feature > div[aria-hidden="true"] { min-height: 200px; border-bottom: 1px solid var(--df-line); }
/* Tile mockups get a frosted-glass top that lets the contour band show through; the text below stays white.
   Inline backgrounds in the patterns need !important. */
.df-tile > div[aria-hidden="true"] { background: linear-gradient(160deg, rgba(255,255,255,0.55), rgba(255,255,255,0.2)) !important; -webkit-backdrop-filter: blur(1.5px) saturate(1.2); backdrop-filter: blur(1.5px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); border-bottom-color: var(--df-day-line); }
.df-tile { background: transparent; }
.df-tile__body { flex: 1; background: #fff; }
/* In the ruled grid the grid fill shows between tiles, so draw the rules with outlines instead. */
.df-grid--ruled:has(> .df-tile) { gap: 0; background: rgba(255,255,255,0.15); }
.df-grid--ruled > .df-tile { background: transparent; outline: 1px solid var(--df-line); outline-offset: -0.5px; }
.df-tile__body, .df-feature__body { padding: 24px 28px 28px; }
.df-feature__body .df-h3 { margin-top: 10px; font-size: 20px; }
.df-dark .df-feature { background: var(--df-navy-2); }
.df-dark .df-feature > div[aria-hidden="true"] { background: #07080d !important; border-bottom-color: var(--df-navy-line); }
.df-dark .df-feature .df-h3 { color: #fff; }
.df-dark .df-text, .df-dark .df-mono-label { color: var(--df-navy-muted); }

/* ---------- Comparison ---------- */
.df-compare { background: #fff; border: 1px solid var(--df-line); border-radius: var(--df-radius); overflow: hidden; }
.df-row { display: grid; grid-template-columns: 24% 38% 1fr; gap: 0 28px; padding: 16px 24px; border-top: 1px solid var(--df-line); font-size: 14px; align-items: center; }
.df-row p { margin: 0; color: var(--df-body); }
.df-row p:first-child { color: var(--df-ink); font-weight: 500; }
.df-row p:last-child { color: var(--df-body-2); }
.df-row--head { border-top: 0; background: var(--df-off); font-family: var(--df-mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; }
.df-row--head p, .df-row--head p:first-child, .df-row--head p:last-child { color: var(--df-body); font-weight: 500; }
.df-row--us { background: var(--df-off); box-shadow: inset 2px 0 0 var(--df-ink); }
.df-row--us p { color: var(--df-ink); font-weight: 500; }
.df-row--us p:first-child { color: var(--df-ink); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.df-row--us p:first-child::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--df-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat; }

/* ---------- Security ---------- */
.df-split-head { display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; justify-content: space-between; }
.df-split-head > :first-child { max-width: 640px; }
.df-split-head > .df-lede { margin: 0; max-width: 380px; }
.df-fact { padding: 28px; }
.df-fact::before { content: ""; display: block; width: 32px; height: 32px; border-radius: 8px; margin-bottom: 18px; border: 1px solid var(--df-line); background: #fff var(--df-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")) center / 16px no-repeat; }
.df-fact:nth-child(2)::before { --df-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1015.5-6.2M21 4v5h-5'/%3E%3C/svg%3E"); }
.df-fact:nth-child(3)::before { --df-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M7 20h10M12 16v4'/%3E%3C/svg%3E"); }
.df-fact:nth-child(4)::before { --df-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3'/%3E%3C/svg%3E"); }
.df-fact:nth-child(5)::before { --df-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E"); }
.df-fact:nth-child(6)::before { --df-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1c1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h12M12 6l6 6-6 6M20 4v16'/%3E%3C/svg%3E"); }
.df-fact h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; color: var(--df-ink); letter-spacing: -0.01em; }
.df-fact p { margin: 0; font-size: 14px; color: var(--df-body); }
.df-band-navy .df-fact::before { border-color: var(--df-navy-line); background-color: var(--df-navy-line); filter: invert(1); }
.df-band-navy .df-fact h3 { color: #fff; }
.df-band-navy .df-fact p { color: var(--df-navy-muted); }
.df-selfhost { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--df-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.df-selfhost p { margin: 0; font-size: 15px; color: var(--df-body); max-width: 760px; }
.df-band-navy .df-selfhost { border-top-color: var(--df-navy-line); }
.df-band-navy .df-selfhost p { color: var(--df-navy-text); }
.df-selfhost .df-actions { margin: 0; }

/* ---------- Setup ---------- */
.df-sticky { position: sticky; top: 96px; align-self: flex-start; }
.df-split .df-steps { flex: 1.4 1 480px; }
.df-steps { display: flex; flex-direction: column; gap: 1px; background: var(--df-line); border: 1px solid var(--df-line); border-radius: var(--df-radius); overflow: hidden; counter-reset: dfstep; }
.df-step { position: relative; background: #fff; margin: 0 !important; padding: 22px 24px 22px 68px; counter-increment: dfstep; }
.df-step::before { content: counter(dfstep); position: absolute; left: 24px; top: 22px; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--df-line-2); color: var(--df-ink); font-family: var(--df-mono); font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.df-step.is-optional::before { border-style: dashed; color: var(--df-body); }
.df-step h3 { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.df-step p { margin: 4px 0 0; font-size: 14px; color: var(--df-body); }
.df-step p code { display: inline-block; max-width: 100%; overflow-x: auto; margin-top: 6px; font-size: 13px; background: var(--df-navy); color: #ededee; border-radius: 8px; padding: 8px 12px; }

/* ---------- Roadmap (works today / coming next) ---------- */
.df-roadmap__col { padding: clamp(28px, 4vw, 40px); }
.df-roadmap__col.is-next { background: var(--df-off) !important; }
.df-roadmap h3 { margin: 0; font-size: 13px; font-weight: 500; color: var(--df-ink); display: flex; align-items: center; gap: 8px; }
.df-roadmap h3::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--df-green); }
.df-roadmap .is-next h3 { color: var(--df-body); }
.df-roadmap .is-next h3::before { background: var(--df-line-2); }
.df-roadmap h3 + ul { margin-top: 18px; }
.df-checks, .df-circles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.df-checks li, .df-circles li { margin: 0; display: flex; gap: 10px; }
.df-checks li::before { content: "✓"; color: var(--df-green); font-weight: 700; }
.df-circles { color: var(--df-body); }
.df-circles li::before { content: "○"; }

/* ---------- FAQ ---------- */
.df-faq-layout { display: flex; flex-wrap: wrap; gap: 32px 72px; }
.df-faq-layout > :first-child { flex: 1 1 300px; min-width: 0; position: sticky; top: 96px; align-self: flex-start; }
.df-faq-layout > :last-child { flex: 2 1 520px; min-width: 0; }
.df-faq-layout .df-h2 { margin-top: 0; }
.df-faq { border-bottom: 1px solid var(--df-line); padding: 20px 0; }
.df-faq:first-child { border-top: 1px solid var(--df-line); }
.df-faq summary { cursor: pointer; list-style: none; font-weight: 500; font-size: 16px; display: flex; justify-content: space-between; gap: 16px; }
.df-faq summary::-webkit-details-marker { display: none; }
.df-faq summary::after { content: "+"; color: var(--df-body); font-size: 18px; font-weight: 400; line-height: 1.2; transition: transform 0.2s ease-out; }
.df-faq[open] summary::after { transform: rotate(45deg); }
.df-faq p { margin: 12px 0 0; font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--df-body); }

/* ---------- Final CTA ---------- */
.df-cta-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url(assets/img/hero-sky.webp) 72% 58% / cover no-repeat, #e6f1fc; border: 1px solid var(--df-line); border-radius: var(--df-radius-lg); padding: clamp(56px, 8vw, 96px) 24px; text-align: center; color: var(--df-ink); }
/* Same sky as the hero, with the sun breathing and clouds drifting. Fades to white at the foot like the hero. */
.df-cta-band > * { position: relative; z-index: 1; }
.df-cta-band::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: url(assets/img/cloud.svg) 6% 30% / 180px auto no-repeat, url(assets/img/cloud.svg) 94% 18% / 120px auto no-repeat; opacity: 0.6; --df-drift-to: 80px; animation: df-drift 36s ease-in-out infinite alternate; }
.df-cta-band::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(240px 240px at 84% 52%, rgba(255,232,170,0.3), transparent 70%); animation: df-twinkle 7s ease-in-out infinite alternate; }
.df-cta-band .df-h2--cta { margin-left: auto; margin-right: auto; max-width: 760px; }
.df-cta-band .df-lede { color: var(--df-body); max-width: 520px; margin-left: auto; margin-right: auto; }
.df-cta-band .df-note { color: var(--df-body); margin-top: 16px; }
.df-cta-band .df-note a { color: var(--df-ink); }
.df-form { margin: 32px auto 0; max-width: 440px; display: flex; flex-wrap: wrap; gap: 8px; text-align: left; }
.df-form input[type=email] { flex: 1 1 220px; min-width: 0; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--df-line-2); background: #fff; font: inherit; font-size: 14px; color: var(--df-ink); }
.df-form input[type=email]:focus { outline: none; border-color: var(--df-ink); box-shadow: 0 0 0 3px rgba(26,28,31,0.08); }
.df-form button { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--df-btn-border); background: var(--df-btn); color: #fff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.df-form button:hover { background: var(--df-btn-hover); }
.df-form__msg { width: 100%; margin: 4px 0 0; font-size: 14px; color: var(--df-ink); }
.df-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.df-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */
.df-footer { border-top: 1px solid var(--df-line); background: #fff; }
.df-footer__inner { max-width: 1248px; margin: 0 auto; padding: 64px 24px 32px; }
.df-footer__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 64px; }
.df-footer__brand { flex: 1 1 260px; max-width: 320px; }
.df-footer__brand p { margin: 14px 0 0; font-size: 14px; color: var(--df-body); }
.df-footer__cols { display: grid; grid-template-columns: repeat(3, 160px); gap: 32px; font-size: 14px; }
.df-footer__cols h2 { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--df-ink); letter-spacing: 0; }
.df-footer__cols a { display: block; color: var(--df-body); text-decoration: none; padding: 4px 0; }
.df-footer__cols a:hover { color: var(--df-ink); }
.df-footer__legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--df-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--df-body); }
.df-footer__legal a { color: var(--df-ink); font-weight: 500; text-decoration: none; }
.df-footer__legal a:hover { color: var(--df-ink); text-decoration: underline; }

/* ---------- Plain pages (privacy, terms, thanks, blog) ---------- */
.df-prose { position: relative; max-width: 720px; margin: 0 auto; padding: var(--df-section-y) 24px; }
/* Text pages (legal, thanks, 404, posts) open under the same pale sky as the bands, behind a clear header. */
main.df-prose { margin-top: -61px; padding-top: calc(var(--df-section-y) + 61px); overflow-x: visible; }
main.df-prose > * { position: relative; z-index: 1; }
main.df-prose::before { content: ""; position: absolute; z-index: 0; top: 0; left: calc(50% - 50vw); width: 100vw; height: 560px; pointer-events: none; background: url(assets/img/contour.webp) 50% 0 / max(100%, 1200px) auto no-repeat; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); animation: df-fade-in 1.2s ease-out both; }
.editor-styles-wrapper main.df-prose { margin-top: 0; padding-top: var(--df-section-y); }
.df-prose .wp-block-post-title, .df-prose h1 { margin: 0 0 24px; font-size: clamp(36px, 4vw, 52px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.df-prose h2 { margin: 40px 0 12px; font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.df-prose h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 500; }
.df-prose p, .df-prose li { color: var(--df-body-2); font-weight: 400; }
.df-prose p { margin: 0 0 16px; }
.df-prose ul { margin: 0 0 16px; padding-left: 20px; }
.df-prose li { margin-bottom: 6px; }
.df-prose .df-legal-meta { margin-bottom: 28px; font-size: 14px; color: var(--df-icon); font-family: var(--df-mono); letter-spacing: 0.02em; }

/* ---------- Mockup helpers (used inside Custom HTML blocks) ---------- */
.df-pillx { white-space: nowrap; flex: none; }
.df-seg button { flex: 1; min-height: 36px; border: 0; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; background: transparent; color: var(--df-body); transition: background 0.15s ease-out; }
.df-seg button.is-active { background: #fff; color: var(--df-ink); box-shadow: 0 0 0 1px var(--df-line), 0 1px 2px rgba(16,17,20,0.08); }
.df-outbox [hidden] { display: none !important; }
.df-outbox [data-df-show] span { white-space: nowrap; }
@keyframes df-pop { 0%, 30% { opacity: 0; transform: translateY(10px); } 38%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.df-pop { animation: df-pop 9s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .df-pop { animation: none !important; opacity: 1 !important; transform: none !important; } }

/* ---------- Email MCP server page ---------- */
.df-mcp-hero { --df-sky-h: 100%; }
.df-mcp-hero__grid > * { animation: df-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.df-mcp-hero__grid > :last-child { animation-duration: 1.2s; animation-delay: 0.2s; }
.df-mcp-hero__grid { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 6vw, 88px); align-items: center; }
.df-mcp-hero__grid > :first-child { flex: 1 1 460px; }
.df-mcp-hero__grid > :last-child { flex: 1 1 420px; }
.df-mcp-hero .df-h1 { margin: 20px 0 0; max-width: 640px; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; }
.df-mcp-hero .df-lede { margin: 20px 0 0; font-size: 18px; }
.df-mcp-hero .df-note { max-width: 560px; }
.df-pill--dot { padding: 4px 12px 4px 10px; }
.df-mcp-prose p { margin: 0; font-size: 16px; color: var(--df-body); }
.df-mcp-prose p + p { margin-top: 16px; }
.df-grid-2.df-mcp-prose p + p { margin-top: 0; }
.df-mcp-prose .df-h3 { margin: 0 0 14px; }
.df-mcp-ol { margin: 20px 0 0; padding-left: 22px; color: var(--df-body); font-size: 15px; }
.df-mcp-ol li + li { margin-top: 10px; }
.df-mcp-ol li::marker { color: var(--df-ink); font-weight: 600; }
.df-mcp-prose--after-head { margin-top: 24px; }
.df-mcp-prose code { font-size: 0.86em; background: var(--df-bg); color: var(--df-ink); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.df-band-navy .df-mcp-prose p { color: var(--df-navy-muted); }
.df-band-navy .df-mcp-prose code { background: var(--df-navy-line); color: #ededee; }
.df-mcp-prose a { font-weight: 500; }
.df-band-navy a { color: #fff; text-decoration-color: var(--df-btn-border); }
.df-mcp-top { align-items: flex-start; }
.df-mcp-card { background: #fff; border: 1px solid var(--df-line); border-radius: var(--df-radius); box-shadow: var(--df-shadow-float); overflow: hidden; font-size: 14px; line-height: 1.5; color: var(--df-ink); text-align: left; }
.df-mcp-mono { font-family: var(--df-mono); overflow-wrap: anywhere; }
/* Flow diagram: assistant -> DayFilter -> mailbox. Stacks on narrow screens. */
.df-mcp-flow { display: flex; align-items: center; gap: 16px; }
.df-mcp-flow > .df-mcp-node { flex: 1 1 0; min-width: 0; }
.df-mcp-flow > .df-mcp-node--main { flex-grow: 1.5; }
.df-mcp-flow__arrow { flex: none; display: flex; justify-content: center; color: var(--df-line-2); }
/* Outbox mode radios (driven by the [data-df-outbox] script). */
.df-mcp-radio { display: flex; flex-direction: column; gap: 8px; }
.df-mcp-radio button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--df-line-2); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: var(--df-ink); text-align: left; cursor: pointer; transition: border-color 0.15s ease-out, background 0.15s ease-out; }
.df-mcp-radio button::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #a0a2a7; background: #fff; }
.df-mcp-radio button:hover { background: var(--df-off); }
.df-mcp-radio button.is-active { border-color: var(--df-ink); background: var(--df-off); }
.df-mcp-radio button.is-active::before { border: 5px solid var(--df-ink); }
/* Activity log rows and the connector URL field. */
.df-mcp-log-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; padding: 10px 16px; border-top: 1px solid var(--df-line); }
.df-mcp-log-row > :last-child { flex: none; white-space: nowrap; }
.df-mcp-url { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.df-mcp-url code { flex: 1 1 220px; min-width: 0; display: flex; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--df-navy); color: #ededee; font-size: 13px; overflow-wrap: anywhere; }
.df-mcp-copy { flex: none; min-height: 44px; min-width: 88px; padding: 0 16px; border: 1px solid var(--df-line-2); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--df-ink); cursor: pointer; }
.df-mcp-copy:hover { background: var(--df-off); }
.df-mcp-copy.is-copied { border-color: var(--df-green); color: var(--df-green); background: var(--df-green-soft); }
.df-step p code.df-mcp-inline { display: inline; margin: 0; padding: 2px 6px; font-size: 13px; overflow-wrap: anywhere; }
.df-mcp-more { margin-top: 32px; }
.df-mcp-more a { font-weight: 500; }
@media (max-width: 820px) {
	.df-mcp-flow { flex-direction: column; align-items: stretch; }
	.df-mcp-flow__arrow { transform: rotate(90deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.df-app-side, .df-app-detail, .df-float { display: none !important; }
}
@media (max-width: 720px) {
	:root { --df-section-y: 64px; }
	.df-h1 { font-size: 40px; line-height: 1.02; }
	.df-h2 { font-size: 28px; }
	.df-h2--display { font-size: 36px; }
	.df-hero__copy { padding-top: 56px; }
	.df-hero { --df-sky-x: 90%; }
	.df-nav-links, .df-announce .df-hide-sm { display: none !important; }
	.df-sticky, .df-faq-layout > :first-child { position: static; }
	.df-cta-band { padding: 48px 20px; }
	.df-stage { padding: 6px 6px 0 !important; border-radius: 12px 12px 0 0 !important; }
	.df-arrow { transform: rotate(90deg); }
	.df-row { grid-template-columns: 1fr; gap: 6px; }
	.df-row--head { display: none; }
	.df-logos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.df-logos__list li { min-height: 80px; }
	.df-hero__copy .df-h1 { text-wrap: balance; }
	.df-footer__top { grid-template-columns: 1fr; }
	.df-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.df-header__login, .df-hide-xs { display: none !important; }
	.df-header__cta { min-height: 34px; }
	.df-form button { flex: 1 1 100%; }
}

/* ---------- Editor tweaks ---------- */
.editor-styles-wrapper .df-sticky { position: static; }
.editor-styles-wrapper .df-hero { margin-top: 0; padding-top: 0; }
.editor-styles-wrapper header.wp-block-template-part { position: static; }