/* Generated by scripts/build-website-styles.py. Do not edit. */
/* Vaslak · Apple Liquid Glass. Solid content surfaces; glass belongs to overlays. */
:root {
  color-scheme: light;
  --background: #f5f5f7;
  --foreground: #1d1d1f;
  --card: #ffffff;
  --card-foreground: #1d1d1f;
  --popover: #ffffff;
  --popover-foreground: #1d1d1f;
  --primary: #00286f;
  --primary-foreground: #ffffff;
  --secondary: #f0f0f3;
  --secondary-foreground: #424245;
  --muted: #f5f5f7;
  --muted-foreground: #6e6e73;
  --accent: #ededf1;
  --accent-foreground: #1d1d1f;
  --destructive: #b42332;
  --success: #237346;
  --warning: #8a5709;
  --border: rgb(0 0 0 / .07);
  --input: rgb(0 0 0 / .15);
  --ring: #326fc5;
  --brand: #00286f;
  --brand-foreground: #ffffff;
  --radius: 12px;
  --radius-pill: 999px;
  --radius-thumb: 12px;
  --radius-card: 18px;
  --radius-panel: 22px;
  --radius-hero: 26px;
  --radius-sheet: 16px;
  --type-display-weight: 600;
  --shape-control: var(--radius-pill);
  --shape-field: var(--radius-thumb);
  --shape-surface: var(--radius-panel);
  --shape-overlay: var(--radius-sheet);
  --line: 1px;
  --line-field: 1px;
  --line-style: solid;
  --field: var(--card);
  --depth-control: 0 1px 2px rgb(0 0 0 / .04);
  --depth-press: 0 0 0 rgb(0 0 0 / 0);
  --depth-field: 0 1px 2px rgb(0 0 0 / .025);
  --depth-surface: 0 1px 3px rgb(0 0 0 / .035), 0 12px 32px rgb(0 0 0 / .035);
  --depth-overlay: 0 1px 4px rgb(0 0 0 / .06), 0 24px 64px rgb(0 0 0 / .14);
  --glass-background: rgb(255 255 255 / .82);
  --glass-border: rgb(255 255 255 / .72);
  --glass-filter: saturate(180%) blur(20px);
  --surface-filter: none;
  --press: scale(.98);
  --motion: 180ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --motion-spring: cubic-bezier(.22,1,.36,1);
  --backdrop: var(--glass-filter);
  --spacing: .25rem;
  --content-width: 1080px;
  --reading-width: 720px;
}
/* Semantic aliases used by existing product views. No independent shape or spacing scale. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --type-body: var(--font-sans); --type-display: var(--font-sans);
  --radius-control: var(--shape-control); --radius-modal: var(--shape-overlay);
  --canvas: var(--background); --surface: var(--card); --surface-raised: var(--popover);
  --surface-subtle: var(--muted); --surface-hover: var(--accent);
  --text: var(--foreground); --text-muted: var(--muted-foreground); --text-subtle: var(--muted-foreground);
  --border-strong: var(--input); --focus: var(--ring); --danger: var(--destructive);
  --brand-hover: var(--brand); --brand-ink: var(--brand); --brand-navy: var(--brand);
  --brand-soft: color-mix(in srgb, var(--primary) 7%, var(--card)); --brand-border: color-mix(in srgb, var(--primary) 16%, var(--border)); --brand-gold: var(--brand);
  --navy: var(--brand); --cyan: var(--brand); --amber: var(--warning);
  --sidebar: var(--card); --sidebar-muted: var(--muted-foreground); --sidebar-border: var(--border); --sidebar-active: var(--accent);
  --on-navy: var(--foreground); --on-navy-muted: var(--muted-foreground);
  --success-soft: color-mix(in srgb, var(--success) 7%, var(--card)); --warning-soft: color-mix(in srgb, var(--warning) 7%, var(--card)); --danger-soft: color-mix(in srgb, var(--destructive) 7%, var(--card));
  --info: var(--brand); --info-soft: var(--muted); --destructive-foreground: var(--primary-foreground);
  --shadow-sm: var(--depth-control); --shadow-md: var(--depth-overlay); --shadow: var(--depth-overlay);
  --overlay: rgb(20 24 35 / .26); --motion-fast: var(--motion); --motion-base: var(--motion);
  --space-1: calc(var(--spacing) * 1); --space-2: calc(var(--spacing) * 2);
  --space-3: calc(var(--spacing) * 3); --space-4: calc(var(--spacing) * 4);
  --space-6: calc(var(--spacing) * 6); --space-8: calc(var(--spacing) * 8);
}


:root[lang="fa"] { --font-sans: "Vazirmatn Variable", "Vazirmatn", -apple-system, sans-serif; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #141416;
  --foreground: #f5f5f7;
  --card: #202023;
  --card-foreground: #f5f5f7;
  --popover: #29292d;
  --popover-foreground: #f5f5f7;
  --primary: #a7c6fa;
  --primary-foreground: #102748;
  --secondary: #2c2c30;
  --secondary-foreground: #ededf1;
  --muted: #27272b;
  --muted-foreground: #aaaab1;
  --accent: #333339;
  --accent-foreground: #f5f5f7;
  --destructive: #ff929b;
  --success: #7ddfa4;
  --warning: #f4c778;
  --border: rgb(255 255 255 / .09);
  --input: rgb(255 255 255 / .20);
  --ring: #a7c6fa;
  --brand: #a7c6fa;
  --brand-foreground: #102748;
  --glass-background: rgb(32 32 35 / .84);
  --glass-border: rgb(255 255 255 / .11);
  --depth-surface: 0 1px 3px rgb(0 0 0 / .10), 0 12px 32px rgb(0 0 0 / .12);
  --depth-overlay: 0 1px 4px rgb(0 0 0 / .16), 0 24px 64px rgb(0 0 0 / .38);
  --overlay: rgb(0 0 0 / .48);
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-background: var(--card); --glass-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --border: #8c8c94; --input: #6e6e73; --glass-background: var(--card); --glass-filter: none; }
  :root[data-theme="dark"] { --border: #8c8c94; --input: #aaaab1; }
}
@font-face {font-family:Vazirmatn;src:url("./Vazirmatn.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: 112px; }
body { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.8; color: var(--foreground); background: var(--background); }
button,input,textarea,select { font-family: var(--font-sans); font-size: 0.875rem; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color: transparent; }
button,summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-inline-size: 100%; height: auto; }
button { color: inherit; }
p { margin: 0 0 16px; }
h1,h2,h3,h4 { margin: 0; line-height: 1.5; font-weight: 700; }
h1 { font-size: 3.75rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.25rem; }
em { font-style: normal; color: var(--primary); }
[hidden] { display: none; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
::selection { background: var(--primary); color: var(--primary-foreground); }
.site-shell { background: var(--background); min-block-size: 100vh; }
.container,.blog-container {max-inline-size:72rem;inline-size:100%;padding-inline:1.5rem;margin-inline:auto;}
.sr-only,.blog-sr { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.vf-icon { flex: none; vertical-align: middle; }
.vf-icon.directional { transform: rotate(0); }
[dir=ltr] .vf-icon.directional { transform: rotate(180deg); }
.vf-button {display:inline-flex;align-items:center;justify-content:center;gap:.5rem;block-size:2.5rem;padding-inline:1rem;border-radius:var(--shape-control);font-size:.875rem;font-weight:600;line-height:1.5;white-space:nowrap;transition:all var(--motion) var(--motion-ease);box-shadow:var(--depth-control);}
.vf-button:disabled { opacity: .5; pointer-events: none; }
.vf-button--primary { background: var(--primary); color: var(--primary-foreground); }
.vf-button--primary:hover {background:color-mix(in srgb,var(--primary) 90%,transparent);}
.vf-button--outline {border:var(--line) solid var(--input);background:transparent;color:var(--foreground);}
.vf-button--outline:hover,.vf-button--ghost:hover { background: var(--accent); }
.vf-button--ghost { background: transparent; }
.vf-button .vf-icon { inline-size: 16px; block-size: 16px; }
.vf-icon-button {display:inline-flex;align-items:center;justify-content:center;gap:.5rem;inline-size:2.5rem;block-size:2.5rem;padding:0;border-radius:var(--shape-control);background:transparent;border:0;}
.vf-icon-button:hover { background: var(--accent); }
.vf-card {position:relative;isolation:isolate;min-inline-size:0;border:var(--line) var(--line-style) var(--border);border-radius:var(--shape-surface);background:var(--card);color:var(--card-foreground);box-shadow:var(--depth-surface);padding:1.25rem;}
.vf-badge {display:inline-flex;align-items:center;gap:.375rem;white-space:nowrap;font-size:.75rem;font-weight:500;}
.vf-badge--brand { color: var(--primary); }
.vf-badge--success { color: var(--success); }
.vf-badge--secondary { color: var(--muted-foreground); }
.vf-badge--warning { color: var(--warning); }
.vf-field {display:flex;flex-direction:column;gap:.375rem;min-inline-size:0;}
.vf-field label {font-size:.875rem;font-weight:500;color:var(--foreground);}
.vf-input {display:flex;inline-size:100%;min-inline-size:0;block-size:2.5rem;border:var(--line-field) solid var(--input);border-radius:var(--shape-field);background:var(--field);box-shadow:var(--depth-field);padding-inline:.75rem;font-size:.875rem;color:var(--foreground);transition:color .15s,border-color .15s;}
.vf-input::placeholder { color: var(--muted-foreground); }
.vf-input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.vf-input[aria-invalid=true] { border-color: var(--destructive); }
.vf-input:disabled { opacity: .5; cursor: not-allowed; }
textarea.vf-input {min-block-size:5rem;block-size:auto;padding:.5rem .75rem;line-height:1.75rem;resize:vertical;}
.vf-accordion {border:1px solid var(--border);border-radius:.75rem;background:var(--card);overflow:hidden;}
.vf-accordion details+details { border-block-start: 1px solid var(--border); }
.vf-accordion summary {display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500;text-align:start;list-style:none;cursor:pointer;}
.vf-accordion summary::-webkit-details-marker { display: none; }
.vf-accordion summary:hover { background: var(--accent); }
.vf-accordion summary svg { transition: transform .2s; }
.vf-accordion details>div {padding:0 1rem 1rem;font-size:.875rem;line-height:1.75rem;color:var(--muted-foreground);}
.website-skip { position: fixed; inset-block-start: -80px; inset-inline-start: 16px; z-index: 100; background: var(--primary); color: var(--primary-foreground); padding: 12px 20px; border-radius: var(--shape-surface); }
.website-skip:focus { inset-block-start: 12px; }
.website-announcement { background: var(--navy); color: var(--primary-foreground); font-size: 0.875rem; }
.website-announcement .container { display: flex; align-items: center; justify-content: center; gap: 16px; min-block-size: 44px; padding-block: 4px; }
.website-announcement a { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 4px; }
.website-announcement .vf-icon-button { color: inherit; }
.site-header { position: sticky; inset-block-start: 0; z-index: 40; background: color-mix(in srgb,var(--card) 94%,transparent); border-block-end: 1px solid var(--border); }
.header-inner {display:flex;block-size:4rem;align-items:center;justify-content:space-between;gap:1.5rem;}
.brand-link { display: inline-flex; align-items: center; flex: none; }
.brand-lockup-image { inline-size: 120px; block-size: 40px; object-fit: contain; }
.desktop-nav {display:flex;align-items:center;gap:.25rem;}
.desktop-nav a,.header-signin {display:inline-flex;align-items:center;border-radius:.375rem;padding:.5rem .75rem;font-size:.875rem;color:var(--muted-foreground);white-space:nowrap;}
.desktop-nav a:hover,.desktop-nav a[aria-current=page] { color: var(--primary); }
.header-actions {display:flex;align-items:center;gap:.5rem;margin-inline-start:auto;}
.header-actions>.vf-button {font-size:.8125rem;block-size:2rem;padding-inline:.75rem;}
.language-button { font-size: 0.75rem; }
.language-button svg { inline-size: 16px; block-size: 16px; }
.mobile-menu { display: none; }
.mobile-menu summary { list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu-panel { position: absolute; inset-inline: 16px; inset-block-start: calc(100% + 8px); display: grid; gap: 4px; background: var(--card); padding: 16px; border: 1px solid var(--border); border-radius: var(--shape-surface); max-block-size: calc(100dvh - 128px); overflow: auto; }
.mobile-menu-panel>a:not(.vf-button) { display:flex; align-items:center; padding:.5rem .625rem; border-radius:.375rem; font-size:.875rem; }
.mobile-menu-panel>a:hover { background: var(--accent); }
.home-hero {padding-block:4rem;background:var(--card);border-block-end:1px solid var(--border);}
.hero-grid {display:grid;grid-template-columns:1fr;gap:4rem;align-items:center;}
.eyebrow { display: block; color: var(--primary); font-size: 0.875rem; font-weight: 600; margin-block-end: 16px; }
.eyebrow .vf-badge { font-size: 0.875rem; }
.hero-copy h1 {font-size:3.75rem;font-weight:900;line-height:1.25;margin:2rem auto 0;}
.hero-copy>p {max-inline-size:36rem;font-size:1.125rem;line-height:2rem;color:var(--muted-foreground);margin:1.5rem auto 0;}
.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-block:2rem;}
.hero-note {display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem;color:var(--muted-foreground);}
.hero-note svg { color: var(--primary); inline-size: 16px; block-size: 16px; }
.hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; margin-block-start: 64px; border-block-start: 1px solid var(--border); color: var(--muted-foreground); font-size: 0.875rem; }
.hero-bottom>div { display: flex; gap: 24px; align-items: center; color: var(--foreground); font-weight: 600; }
.workflow-preview {inline-size:100%;max-inline-size:48rem;margin-inline:auto;text-align:start;}
.preview-top { display: flex; align-items: center; gap: 12px; min-block-size: 56px; padding: 16px 24px; border-block-end: 1px solid var(--border); font-size: 0.75rem; }
.preview-top>.vf-badge { margin-inline-start: auto; }
.preview-dot { inline-size: 8px; block-size: 8px; background: var(--cyan); border-radius: 9999px; }
.preview-prompt { display: flex; gap: 12px; padding: 24px 24px 16px; }
.avatar { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex: none; background: var(--accent); color: var(--primary); border-radius: var(--shape-control); font-weight: 600; }
.preview-prompt small { color: var(--muted-foreground); font-size: 0.75rem; }
.preview-prompt p { font-size: 1rem; font-weight: 500; margin: 4px 0 0; }
.preview-route { padding: 16px 24px; display: grid; gap: 12px; }
.preview-step { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--background); border: 1px solid var(--border); border-radius: var(--shape-surface); }
.preview-step>span { display: grid; place-items: center; inline-size: 28px; block-size: 28px; background: var(--card); border-radius: 9999px; color: var(--muted-foreground); font-size: 0.75rem; }
.preview-step p { margin: 0; flex: 1; font-size: 0.875rem; }
.preview-step svg { color: var(--success); inline-size: 16px; block-size: 16px; }
.preview-result { margin: 12px 24px 24px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid color-mix(in srgb,var(--primary) 20%,var(--border)); border-radius: var(--shape-surface); padding: 16px; background: var(--accent); }
.preview-result>svg { color: var(--primary); margin-block-start: 4px; }
.preview-result strong { font-size: 0.875rem; }
.preview-result p { font-size: 0.75rem; margin: 4px 0 0; color: var(--muted-foreground); }
.section { padding-block: 80px; }
.section-bottom { padding-block-end: 80px; }
.section-tint { background: var(--card); }
.section-heading { margin-block-end: 40px; max-inline-size: 760px; }
.section-heading h2 { margin-block-end: 16px; }
.section-heading p { color: var(--muted-foreground); font-size: 1rem; max-inline-size: 620px; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 32px; max-inline-size: none; }
.section-heading-row p { margin-block-end: 0; }
.section-heading-row>.vf-button { flex: none; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.feature-grid .vf-card h2 { font-size: 1.25rem; }
.feature-icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; background: var(--accent); color: var(--primary); border-radius: var(--shape-surface); margin-block-end: 24px; }
.feature-card h3,.feature-grid .vf-card h2 { margin-block-end: 12px; }
.feature-card p,.feature-grid .vf-card p { color: var(--muted-foreground); margin: 0; font-size: 1rem; }
.split-section { display: grid; grid-template-columns: .85fr 1.15fr; align-items: start; gap: 80px; }
.split-section .section-heading { margin-block-end: 0; }
.usecase-list { display: grid; gap: 16px; }
.usecase-card { display: flex; align-items: start; gap: 24px; }
.step-number { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; flex: none; color: var(--primary); background: var(--accent); border-radius: 9999px; font-size: 1rem; font-weight: 600; }
.usecase-card h3 { margin-block-end: 8px; }
.usecase-card p { color: var(--muted-foreground); margin: 0; font-size: 1rem; }
.section-navy { background: var(--navy); color: var(--primary-foreground); }
.section-navy .eyebrow { color: var(--cyan); }
.section-navy .step-number { background: color-mix(in srgb,var(--cyan) 12%,transparent); color: var(--cyan); margin-block-end: 24px; }
.architecture-step { border-inline-start: 1px solid color-mix(in srgb,var(--primary-foreground) 20%,transparent); padding-inline-start: 24px; }
.architecture-step h3 { margin-block-end: 16px; }
.architecture-step p { color: color-mix(in srgb,var(--primary-foreground) 76%,transparent); margin: 0; }
.connector-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.connector-card { display: flex; flex-direction: column; transition: border-color .2s,transform .2s; }
.connector-card:hover { border-color: var(--primary); }
.connector-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 24px; }
.connector-mark { inline-size: 48px; block-size: 48px; display: inline-grid; place-items: center; flex: none; background: var(--accent); color: var(--primary); border-radius: var(--shape-surface); font-size: 1rem; font-weight: 700; direction: ltr; }
.connector-card h3 { font-size: 1.25rem; margin-block-end: 12px; }
.connector-card>p { font-size: 0.875rem; color: var(--muted-foreground); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.connector-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-block-start: 1px solid var(--border); padding-block-start: 16px; margin-block-start: 8px; font-size: 0.75rem; }
.connector-card-bottom>span { color: var(--muted-foreground); overflow-wrap: anywhere; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 600; min-block-size: 44px; }
.text-link .vf-icon { inline-size: 16px; block-size: 16px; }
.catalog-live-note { color: var(--muted-foreground); font-size: 0.75rem; margin-block: 20px 0; }
.page-hero { padding-block: 64px 48px; max-inline-size: 1200px; }
.page-hero>h1 { font-size: 3rem; max-inline-size: 900px; margin-block-end: 20px; }
.page-hero>p { max-inline-size: 720px; font-size: 1.125rem; color: var(--muted-foreground); margin: 0; }
.catalog-toolbar { display: grid; grid-template-columns: 1fr minmax(200px,280px); gap: 24px; padding: 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--shape-surface); margin-block-end: 40px; }
.catalog-category { margin-block-end: 40px; }
.catalog-category h2 { font-size: 1.5rem; margin-block-end: 24px; }
.catalog-request { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block-start: 48px; }
.catalog-request h2 { font-size: 1.5rem; margin-block-end: 8px; }
.catalog-request p { margin: 0; color: var(--muted-foreground); }
.connector-detail-heading { display: flex; align-items: center; gap: 24px; margin-block: 24px; }
.connector-detail-heading .connector-mark { inline-size: 80px; block-size: 80px; font-size: 1.875rem; }
.connector-detail-heading h1 { font-size: 3rem; }
.connector-detail-heading .eyebrow { margin-block-end: 4px; }
.pricing-controls { display: flex; gap: 8px; justify-content: center; margin-block-end: 32px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 24px; min-block-size: 360px; }
.pricing-card { display: flex; flex-direction: column; gap: 24px; }
.pricing-card h3 { font-size: 1.5rem; }
.pricing-price strong { display: block; font-size: 1.875rem; line-height: 1.8; }
.pricing-price small { color: var(--muted-foreground); font-size: 0.75rem; }
.pricing-card ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 12px; flex: 1; }
.pricing-card li { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; }
.pricing-card del { color: var(--muted-foreground); font-size: 0.75rem; }
.pricing-error { grid-column: 1/-1; padding: 48px; text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--shape-surface); }
.pricing-skeleton { min-block-size: 360px; }
.skeleton { background: var(--card); }
.final-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 48px; background: var(--accent); border: 1px solid var(--border); border-radius: var(--shape-surface); }
.final-cta h2 { margin-block-end: 16px; }
.final-cta p { color: var(--muted-foreground); margin: 0; }
.site-footer { background: var(--card); border-block-start: 1px solid var(--border); padding-block: 64px 24px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 48px; }
.footer-brand p { max-inline-size: 340px; color: var(--muted-foreground); font-size: 0.875rem; margin-block: 20px; }
.status-line { display: inline-flex; align-items: center; gap: 8px; color: var(--success); font-size: 0.75rem; }
.status-line .vf-icon { inline-size: 16px; block-size: 16px; }
.footer-grid>div:not(.footer-brand) { display: flex; flex-direction: column; align-items: start; gap: 8px; }
.footer-grid strong { font-size: 1rem; margin-block-end: 8px; }
.footer-grid>div>a:not(.brand-link) { color: var(--muted-foreground); font-size: 0.875rem; min-block-size: 36px; display: flex; align-items: center; }
.footer-grid a:hover { color: var(--primary); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; font-size: 0.75rem; color: var(--muted-foreground); border-block-start: 1px solid var(--border); padding-block-start: 24px; margin-block-start: 48px; }
.blog-intro { padding-block: 64px 48px; }
.blog-eyebrow { display: block; font-size: 0.875rem; font-weight: 600; color: var(--primary); margin-block-end: 16px; }
.blog-intro h1 { font-size: 3.75rem; margin-block-end: 24px; }
.blog-intro>p { font-size: 1.125rem; max-inline-size: 700px; color: var(--muted-foreground); }
.blog-intro-line { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-block-start: 1px solid var(--border); padding-block-start: 24px; margin-block-start: 40px; font-size: 0.75rem; }
.blog-intro-line>a { color: var(--primary); display: inline-flex; align-items: center; gap: 8px; }
.blog-list { padding-block-end: 80px; }
.blog-tools { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block-end: 32px; }
.blog-categories { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-categories>a { display: flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 8px 16px; border-radius: var(--shape-surface); border: 1px solid var(--border); background: var(--card); font-size: 0.875rem; }
.blog-categories>a[aria-current=page] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.blog-categories span { font-size: 0.75rem; opacity: .8; }
.blog-search { position: relative; min-inline-size: 240px; }
.blog-search input { padding-inline-end: 48px; }
.blog-search button { position: absolute; inset-block: 2px; inset-inline-end: 2px; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.blog-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.blog-cover { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--accent); }
.blog-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .2s; }
.blog-card-copy { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 0.75rem; color: var(--muted-foreground); margin-block-end: 16px; }
.blog-meta>span { color: var(--primary); }
.blog-card h2 { font-size: 1.25rem; margin-block-end: 16px; line-height: 1.5; }
.blog-card h2 a:hover { color: var(--primary); }
.blog-card-copy>p { font-size: 0.875rem; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.blog-read { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: 0.875rem; font-weight: 600; min-block-size: 44px; align-self: start; }
.blog-featured { grid-column: 1/-1; display: grid; grid-template-columns: 1.15fr 1fr; }
.blog-featured .blog-cover { aspect-ratio: 16/10; block-size: 100%; min-block-size: 320px; }
.blog-featured .blog-card-copy { padding: 40px; justify-content: center; }
.blog-featured h2 { font-size: 1.875rem; }
.blog-featured .blog-card-copy>p { flex: 0; font-size: 1rem; }
.blog-art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; inline-size: 100%; block-size: 100%; min-block-size: 180px; background: var(--card); color: var(--primary); font-weight: 600; }
.blog-art img { inline-size: 80px; block-size: 80px; object-fit: contain; }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 24px; margin-block-start: 48px; font-size: 0.875rem; }
.blog-pagination a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 8px 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--shape-surface); }
.empty-state,.blog-empty { text-align: center; padding: 64px 24px; }
.empty-state h1,.empty-state h2,.blog-empty h1,.blog-empty h2 { margin-block: 16px; }
.empty-state p,.blog-empty p { color: var(--muted-foreground); max-inline-size: 620px; margin-inline: auto; }
.blog-empty .blog-art { max-inline-size: 240px; margin-inline: auto; border-radius: var(--shape-surface); }
.blog-article { padding-block: 40px 64px; }
.blog-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--muted-foreground); font-size: 0.75rem; }
.blog-breadcrumb a { min-block-size: 44px; display: inline-flex; align-items: center; }
.blog-article-head { max-inline-size: 880px; padding-block: 32px; }
.blog-article-head h1 { font-size: 3rem; line-height: 1.5; margin-block-end: 24px; }
.blog-deck { font-size: 1.25rem; color: var(--muted-foreground); line-height: 1.8; }
.blog-article-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 0.75rem; color: var(--muted-foreground); margin-block-start: 24px; }
.blog-hero-cover { margin: 16px 0 48px; border-radius: var(--shape-surface); overflow: hidden; aspect-ratio: 16/9; background: var(--accent); }
.blog-hero-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.blog-reading { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 64px; align-items: start; }
.blog-prose { font-size: 1.125rem; line-height: 1.8; overflow-wrap: anywhere; max-inline-size: 800px; }
.blog-prose h2 { font-size: 1.875rem; margin-block: 40px 20px; }
.blog-prose h3 { font-size: 1.5rem; margin-block: 32px 16px; }
.blog-prose p { margin-block: 0 24px; }
.blog-prose ul,.blog-prose ol { padding-inline-start: 24px; margin-block: 0 24px; }
.blog-prose li { padding-inline-start: 8px; margin-block-end: 8px; }
.blog-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.blog-prose blockquote { border-inline-start: 4px solid var(--primary); margin: 32px 0; padding: 20px 24px; background: var(--accent); border-radius: var(--shape-surface); font-size: 1.25rem; }
.blog-prose figure { margin: 32px 0; }
.blog-prose figure img { display: block; border-radius: var(--shape-surface); inline-size: 100%; aspect-ratio: 16/9; object-fit: contain; background: var(--card); }
.blog-prose figcaption { font-size: 0.75rem; color: var(--muted-foreground); text-align: center; margin-block-start: 12px; }
.blog-prose pre { direction: ltr; text-align: start; background: var(--navy); color: var(--primary-foreground); padding: 24px; border-radius: var(--shape-surface); font-size: 0.875rem; overflow: auto; }
.blog-prose hr { border: 0; border-block-start: 1px solid var(--border); margin-block: 32px; }
.blog-toc { position: sticky; inset-block-start: 116px; border: 1px solid var(--border); padding: 24px; border-radius: var(--shape-surface); background: var(--card); }
.blog-toc strong { font-size: 0.875rem; }
.blog-toc nav { display: grid; gap: 8px; margin-block-start: 16px; }
.blog-toc a { font-size: 0.75rem; line-height: 1.8; color: var(--muted-foreground); padding-block: 8px; }
.blog-toc a:hover { color: var(--primary); }
.blog-article-end { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; border-block-start: 1px solid var(--border); margin-block-start: 48px; padding-block-start: 24px; font-size: 0.875rem; }
.blog-article-end a { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; }
.blog-related { padding-block: 24px 80px; }
.blog-related>h2 { margin-block-end: 32px; }
.website-page { padding-block: 64px 80px; }
.website-page-heading { max-inline-size: 800px; margin-block-end: 40px; }
.website-page-heading h1 { font-size: 3rem; margin-block-end: 20px; }
.website-page-heading p { font-size: 1.125rem; color: var(--muted-foreground); }
.contact-layout { display: grid; grid-template-columns: .7fr 1.3fr; align-items: start; gap: 32px; }
.contact-info h2,.contact-panel h2 { font-size: 1.5rem; margin-block-end: 20px; }
.contact-info p { color: var(--muted-foreground); }
.contact-info>a { display: block; margin-block-start: 16px; color: var(--primary); }
.contact-info .text-link { display: flex; }
.contact-panel {padding:1.25rem;}
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.contact-fields>.vf-field:nth-child(3),.field--wide { grid-column: 1/-1; }
.field-error { color: var(--destructive); font-size: 0.75rem; min-block-size: 0; }
.field-error:empty { display: none; }
.contact-honeypot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-panel form>.vf-button { margin-block-start: 24px; }
.verification-field { margin-block-start: 24px; }
.verification-help { color: var(--muted-foreground); font-size: 0.75rem; }
.turnstile-widget { min-height: 65px; margin-block: 12px; }
.form-error { padding: 16px; background: var(--danger-soft); color: var(--destructive); border: 1px solid var(--destructive); border-radius: var(--shape-surface); margin-block: 16px; }
.form-error ul { margin-block: 8px 0; padding-inline-start: 24px; }
.form-error a { text-decoration: underline; }
.analytics-consent { position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 80; inline-size: min(560px,calc(100% - 40px)); background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--shape-surface); padding: 24px; font-size: 0.875rem; }
.analytics-consent p { color: var(--muted-foreground); }
.analytics-consent a { color: var(--primary); text-decoration: underline; }
.analytics-consent-actions { display: flex; gap: 12px; margin-block-start: 16px; }
.analytics-consent button { min-block-size: 44px; border: 1px solid var(--border); background: var(--background); padding: 8px 20px; border-radius: var(--shape-control); }
.analytics-consent .analytics-accept { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
@media(max-width:1120px) {
.desktop-nav {display:flex;align-items:center;gap:.25rem;}
.desktop-nav a { font-size: 0.75rem; }
.header-inner {display:flex;block-size:4rem;align-items:center;justify-content:space-between;gap:1.5rem;}
.header-actions {display:flex;align-items:center;gap:.5rem;margin-inline-start:auto;}
.header-actions>.header-signin { display: none; }
.hero-grid {display:grid;grid-template-columns:1fr;gap:4rem;align-items:center;}
.split-section { gap: 40px; }
.footer-grid { gap: 32px; }
}
@media(max-width:960px) {
.desktop-nav {display:flex;align-items:center;gap:.25rem;}
.mobile-menu { display: block; }
.header-actions>.vf-button {font-size:.8125rem;block-size:2rem;padding-inline:.75rem;}
.hero-grid {display:grid;grid-template-columns:1fr;gap:4rem;align-items:center;}
.hero-copy {max-inline-size:56rem;margin-inline:auto;text-align:center;}
.workflow-preview {inline-size:100%;max-inline-size:48rem;margin-inline:auto;text-align:start;}
.home-hero {padding-block:4rem;background:var(--card);border-block-end:1px solid var(--border);}
.hero-bottom { margin-block-start: 40px; flex-wrap: wrap; }
.feature-grid,.connector-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.feature-grid>:last-child:nth-child(3) { grid-column: 1/-1; }
.split-section { grid-template-columns: 1fr; gap: 32px; }
.blog-tools { align-items: stretch; flex-direction: column; }
.blog-search { max-inline-size: 400px; }
.blog-reading { grid-template-columns: minmax(0,1fr); gap: 32px; }
.blog-toc { position: static; grid-row: 1; max-inline-size: 800px; }
.blog-toc nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.blog-featured .blog-card-copy { padding: 24px; }
.blog-featured h2 { font-size: 1.5rem; }
.contact-layout { grid-template-columns: 1fr; }
.contact-info { display: none; }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.footer-brand { grid-column: 1/-1; }
.final-cta { align-items: start; flex-direction: column; }
}
@media(max-width:640px) {
.container,.blog-container {max-inline-size:72rem;inline-size:100%;padding-inline:1.5rem;margin-inline:auto;}
.header-inner {display:flex;block-size:4rem;align-items:center;justify-content:space-between;gap:1.5rem;}
.header-actions .language-button { display: none; }
.brand-lockup-image { inline-size: 112px; block-size: 36px; }
.mobile-menu { margin-inline-start: auto; }
.header-actions {display:flex;align-items:center;gap:.5rem;margin-inline-start:auto;}
.home-hero {padding-block:4rem;background:var(--card);border-block-end:1px solid var(--border);}
.hero-copy h1 {font-size:3.75rem;font-weight:900;line-height:1.25;margin:2rem auto 0;}
.hero-copy>p,.page-hero>p { font-size: 1rem; }
.hero-actions {display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-block:2rem;}
.hero-actions .vf-button { flex: 1; padding-inline: 16px; }
.hero-note {display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.75rem;color:var(--muted-foreground);}
.hero-note svg { margin-block-start: 4px; }
.hero-bottom { margin-block-start: 32px; padding-block: 24px; gap: 12px; }
.hero-bottom>div { gap: 16px; font-size: 0.75rem; }
.workflow-preview {inline-size:100%;max-inline-size:48rem;margin-inline:auto;text-align:start;}
.preview-top { padding: 12px 16px; gap: 8px; }
.preview-prompt { padding: 20px 16px 12px; }
.preview-route { padding: 12px 16px; }
.preview-step { gap: 8px; }
.preview-step p { font-size: 0.75rem; }
.preview-result { margin: 8px 16px 16px; }
.section { padding-block: 48px; }
.section-bottom { padding-block-end: 48px; }
.section-heading { margin-block-end: 24px; }
.section-heading h2 { font-size: 1.875rem; }
.section-heading-row { align-items: start; flex-direction: column; gap: 20px; }
.feature-grid,.connector-grid,.blog-grid { grid-template-columns: 1fr; }
.feature-grid>:last-child:nth-child(3) { grid-column: auto; }
.vf-card {position:relative;isolation:isolate;min-inline-size:0;border:var(--line) var(--line-style) var(--border);border-radius:var(--shape-surface);background:var(--card);color:var(--card-foreground);box-shadow:var(--depth-surface);padding:1.25rem;}
.connector-card { padding: 24px; }
.feature-grid { gap: 16px; }
.usecase-card { gap: 16px; }
.usecase-card .step-number { inline-size: 36px; block-size: 36px; }
.usecase-card h3 { font-size: 1.125rem; }
.architecture-step { padding-block: 12px; }
.architecture-step .step-number { margin-block-end: 16px; }
.catalog-toolbar { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
.catalog-request { align-items: start; flex-direction: column; gap: 20px; }
.page-hero { padding-block: 40px 32px; }
.page-hero>h1 { font-size: 2.25rem; }
.connector-detail-heading { gap: 16px; }
.connector-detail-heading h1 { font-size: 1.875rem; }
.connector-detail-heading .connector-mark { inline-size: 64px; block-size: 64px; font-size: 1.5rem; }
.pricing-grid { grid-template-columns: 1fr; }
.final-cta { padding: 24px; }
.final-cta h2 { font-size: 1.875rem; }
.final-cta>.vf-button { inline-size: 100%; }
.site-footer { padding-block: 48px 24px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.footer-brand { grid-column: 1/-1; }
.footer-bottom { flex-direction: column; gap: 8px; margin-block-start: 32px; }
.blog-intro { padding-block: 40px 32px; }
.blog-intro h1 { font-size: 2.25rem; }
.blog-intro>p { font-size: 1rem; }
.blog-intro-line { align-items: start; flex-direction: column; gap: 12px; margin-block-start: 24px; }
.blog-tools { gap: 16px; }
.blog-search { max-inline-size: none; }
.blog-featured { grid-column: auto; display: flex; }
.blog-card { padding: 0; }
.blog-featured .blog-cover { min-block-size: 0; aspect-ratio: 16/10; }
.blog-featured .blog-card-copy,.blog-card-copy { padding: 24px; }
.blog-featured h2,.blog-card h2 { font-size: 1.25rem; }
.blog-featured .blog-card-copy>p { font-size: 0.875rem; }
.blog-list { padding-block-end: 48px; }
.blog-article { padding-block: 24px 40px; }
.blog-article-head { padding-block: 20px; }
.blog-article-head h1 { font-size: 1.875rem; }
.blog-deck { font-size: 1.125rem; }
.blog-hero-cover { margin-block: 16px 32px; }
.blog-prose { font-size: 1rem; }
.blog-prose h2 { font-size: 1.5rem; }
.blog-prose h3 { font-size: 1.25rem; }
.blog-prose blockquote { font-size: 1.125rem; padding: 16px 20px; }
.blog-related { padding-block: 24px 48px; }
.website-page { padding-block: 40px 48px; }
.website-page-heading h1 { font-size: 2.25rem; }
.website-page-heading p { font-size: 1rem; }
.contact-panel {padding:1.25rem;}
.contact-fields { grid-template-columns: 1fr; }
.contact-panel form>.vf-button { inline-size: 100%; }
.website-announcement .container { gap: 8px; justify-content: start; flex-wrap: wrap; font-size: 0.75rem; }
.website-announcement .vf-icon-button { margin-inline-start: auto; }
.vf-accordion summary {display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;font-size:.875rem;font-weight:500;text-align:start;list-style:none;cursor:pointer;}
.vf-accordion details>div {padding:0 1rem 1rem;font-size:.875rem;line-height:1.75rem;color:var(--muted-foreground);}
}
@media(prefers-reduced-motion:reduce) {
html { scroll-behavior: auto; }
}
.connector-mark img { inline-size: 70%; block-size: 70%; object-fit: contain; }
.verification-field { display: grid; gap: 8px; margin-block: 20px; }
.verification-help { color: var(--muted-foreground); }
.turnstile-widget { min-block-size: 65px; }

.blog-prose a { overflow-wrap: anywhere; }
.hero-copy {max-inline-size:56rem;margin-inline:auto;text-align:center;}
.home-hero .hero-actions { justify-content:center; }
.vf-button:active { transform:var(--press);box-shadow:var(--depth-press); }
.vf-button:focus-visible,.vf-icon-button:focus-visible { outline:2px solid var(--ring);outline-offset:2px; }
.hero-copy h1 em { color:var(--brand);font-style:normal; }
@media(max-width:639px) { .container,.blog-container { padding-inline:1rem; } .hero-copy h1 { font-size:2.25rem; } .home-hero { padding-block:4rem; } }
@supports(-webkit-touch-callout:none) { .vf-input { font-size:max(1rem,1em); } }


/* The registry Navbar switches to its mobile menu below lg. */
@media(max-width:1023px) {
 .desktop-nav,.header-signin {display:none;}
 .mobile-menu {display:block;}
 .header-inner {gap:.5rem;}
 .header-actions {gap:.5rem;}
}
@media(max-width:639px) {
 .header-actions>.vf-button {display:none;}
 .container,.blog-container {padding-inline:1rem;}
}

/* Apple Liquid Glass public shell and editorial surfaces. */
html { -webkit-font-smoothing: antialiased; }
html[lang=fa],html[lang=fa] :is(h1,h2,h3,h4,button,input,textarea,select) { letter-spacing: 0; }
html[lang=en] :is(h1,h2,h3) { letter-spacing: -.025em; }
.container,.blog-container { max-inline-size: 1128px; }
.vf-icon { stroke-width: 1.75; }
.vf-button,.vf-icon-button,.vf-input,.header-actions > .vf-button { min-block-size: 44px; block-size: 44px; }
.vf-icon-button { inline-size: 44px; flex-shrink: 0; }
.vf-button { padding-inline: 20px; transition: background var(--motion),box-shadow var(--motion),transform var(--motion); }
.vf-button--outline { background: var(--card); border-color: var(--input); }
.vf-input { border-radius: var(--radius-thumb); }
textarea.vf-input { block-size: auto; min-block-size: 132px; }
.vf-card { padding: 28px; }
.vf-badge,.status { border-radius: var(--radius-pill); padding: 3px 10px; background: var(--muted); }
.vf-badge--brand { background: var(--brand-soft); }
.vf-badge--success { background: var(--success-soft); }
.vf-badge--warning { background: var(--warning-soft); }
.site-header { background: var(--glass-background); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); }
.header-inner { block-size: 76px; }
.desktop-nav a,.header-signin { min-block-size: 44px; border-radius: var(--radius-pill); padding-inline: 14px; }
.desktop-nav a[aria-current=page] { background: var(--brand-soft); }
.desktop-nav a:hover { background: var(--accent); }
.mobile-menu-panel { border-radius: var(--radius-sheet); background: var(--glass-background); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); box-shadow: var(--depth-overlay); border-color: var(--glass-border); }
.mobile-menu-panel > a:not(.vf-button) { min-block-size: 44px; border-radius: var(--radius-thumb); }
.home-hero { padding-block: 80px 64px; background: var(--background); }
.hero-grid { gap: 48px; }
.hero-copy { max-inline-size: 840px; }
.hero-copy h1 { font-size: clamp(36px,4.8vw,60px); font-weight: 600; line-height: 1.55; margin-block-start: 20px; }
html[lang=en] .hero-copy h1 { line-height: 1.12; }
.hero-copy > p { max-inline-size: 640px; color: #6e6e73; font-size: 19px; line-height: 1.9; margin-block-start: 20px; }
.hero-copy h1 em { color: var(--primary); }
.hero-actions { gap: 12px; margin-block: 28px 20px; }
.hero-actions .vf-button { min-block-size: 48px; padding-inline: 24px; }
.workflow-preview { border-radius: var(--radius-hero); background: var(--card); padding: 0; box-shadow: 0 2px 4px rgb(0 0 0 / .04),0 20px 56px rgb(0 0 0 / .065); overflow: hidden; }
.preview-top { min-block-size: 60px; }
.preview-step { border-radius: var(--radius-thumb); }
.hero-bottom { margin-block-start: 48px; }
.section-heading h2,.section-copy h2 { font-weight: 600; }
.feature-grid,.connector-grid,.usecase-grid { gap: 20px; }
.connector-card,.usecase-card,.feature-card,.pricing-card { border-radius: var(--radius-card); }
.connector-mark,.step-number,.avatar { border-radius: var(--radius-thumb); }
.page-hero,.blog-intro { padding-block: 64px 40px; }
.page-hero h1,.blog-intro h1,.website-page-heading h1 { font-size: clamp(32px,4vw,48px); font-weight: 600; line-height: 1.5; }
.catalog-toolbar { padding: 24px; border-radius: var(--radius-panel); box-shadow: var(--depth-surface); }
.vf-accordion,.guide-article details { border-radius: var(--radius-card); }
.vf-accordion summary { min-block-size: 64px; padding: 18px 24px; }
.vf-accordion details > div { padding: 0 24px 24px; }
.final-cta { border-radius: var(--radius-hero); box-shadow: var(--depth-surface); }
.final-cta h2 { font-weight: 600; }
.blog-card { border-radius: var(--radius-card); padding: 0; }
.blog-card h2 { font-weight: 600; }
.blog-featured { border-radius: var(--radius-hero); }
.blog-article-head { max-inline-size: 840px; }
.blog-article-head h1 { font-size: clamp(30px,3.8vw,46px); font-weight: 600; }
.blog-prose { max-inline-size: var(--reading-width); line-height: 1.95; }
.blog-toc { border-radius: var(--radius-card); box-shadow: var(--depth-surface); }
.blog-toc a { min-block-size: 44px; display: flex; align-items: center; }
.blog-prose pre { background: var(--muted); color: var(--foreground); border: 1px solid var(--border); }
.blog-pagination a { border-radius: var(--radius-pill); }
.website-prose { max-inline-size: var(--reading-width); }
.contact-panel { padding: 32px; }
.site-footer { background: var(--card); border-block-start: 1px solid var(--border); }
@media(hover:hover) { .connector-card:hover,.blog-card:hover { box-shadow: 0 2px 5px rgb(0 0 0 / .04),0 16px 36px rgb(0 0 0 / .065); } }
@media(max-width:639px) {
 .header-inner { block-size: 64px; }
 .home-hero { padding-block: 52px 40px; }
 .hero-grid { gap: 32px; }
 .hero-copy h1 { font-size: 36px; }
 .hero-copy > p { font-size: 17px; }
 .hero-actions { justify-content: center; }
 .hero-bottom { margin-block-start: 32px; }
 .vf-card { padding: 22px; }
 .workflow-preview,.blog-card { padding: 0; }
 .preview-top,.preview-route,.preview-prompt { padding-inline: 20px; }
 .page-hero,.blog-intro { padding-block: 40px 28px; }
 .contact-panel { padding: 24px; }
 .vf-input { font-size: 16px; }
 .vf-accordion summary { padding-inline: 20px; }
 .vf-accordion details > div { padding-inline: 20px; }
}
@supports not (backdrop-filter: blur(1px)) { .site-header,.mobile-menu-panel { background: var(--card); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; } }