/* FlatFilePro site styles. Tokens live in tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ffp-bg);color:var(--ffp-fg);font-family:var(--ffp-font-body);font-size:var(--ffp-body);line-height:var(--ffp-lh-body)}
img,video,iframe{max-width:100%}
img{height:auto}
.prose a,.breadcrumbs a,.pager a,.page-wrap a{color:var(--ffp-purple-600);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--ffp-purple-700)}
.prose img{display:inline-block}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;padding:8px 12px;border:2px solid var(--ffp-black)}
.skip-link:focus{left:8px}
h1,h2,h3,h4{font-family:var(--ffp-font-heading);font-weight:800;line-height:var(--ffp-lh-heading);letter-spacing:var(--ffp-tracking-snug);color:var(--ffp-black)}
h1{font-family:var(--ffp-font-display);font-weight:400;font-size:var(--ffp-h1);margin:.4em 0 .5em}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.center{text-align:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:var(--ffp-stroke-2) solid var(--ffp-black);border-radius:var(--ffp-r-pill);background:var(--ffp-white);color:var(--ffp-black);font-weight:700;text-decoration:none;box-shadow:var(--ffp-shadow-flat);transition:transform var(--ffp-dur) var(--ffp-ease-out),box-shadow var(--ffp-dur) var(--ffp-ease-out)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ffp-black);color:var(--ffp-black)}
.btn-primary{background:var(--ffp-purple-500);color:var(--ffp-white)}
.btn-primary:hover{color:var(--ffp-white)}

/* Header */
.site-header{border-bottom:var(--ffp-stroke-2) solid var(--ffp-black);background:var(--ffp-white);position:sticky;top:0;z-index:10}
.header-row{display:flex;align-items:center;gap:24px;min-height:72px}
.brand img{display:block;height:36px;width:auto}
.nav{display:flex;gap:20px;margin-left:12px}
.nav a,.link-login{color:var(--ffp-black);font-weight:600;text-decoration:none}
.nav a:hover,.link-login:hover{color:var(--ffp-purple-500)}
.header-cta{margin-left:auto;display:flex;align-items:center;gap:16px}
@media (max-width:720px){.nav{display:none}.header-cta .btn{padding:10px 14px;font-size:14px}}

/* Footer */
.site-footer{margin-top:80px;background:var(--ffp-black);color:var(--ffp-ink-300);padding:56px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.footer-grid h2{color:var(--ffp-white);font-size:14px;text-transform:uppercase;letter-spacing:var(--ffp-tracking-eyebrow);margin:0 0 12px}
.footer-grid a{display:block;color:var(--ffp-ink-300);text-decoration:none;padding:4px 0}
.footer-grid a:hover{color:var(--ffp-white)}
.footer-logo{height:40px;width:auto;background:#fff;border-radius:var(--ffp-r-sm);padding:4px 8px}
.footer-base{border-top:1px solid var(--ffp-ink-700);margin-top:40px;padding-top:20px;font-size:var(--ffp-body-sm)}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}}

/* Posts and pages */
.post-wrap,.page-wrap{max-width:780px;padding-top:24px}
.breadcrumbs{font-size:var(--ffp-body-sm);color:var(--ffp-fg-muted)}
.breadcrumbs a{color:var(--ffp-fg-muted)}
.post-meta{color:var(--ffp-fg-muted);font-size:var(--ffp-body-sm);margin-top:-8px}
.prose{font-size:17px;line-height:var(--ffp-lh-loose)}
.prose h2{font-size:28px;margin:1.6em 0 .5em}
.prose h3{font-size:22px;margin:1.4em 0 .4em}
.prose img{border-radius:var(--ffp-r-md)}
.prose table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--ffp-ink-300);padding:8px 10px;text-align:left}
.prose th{background:var(--ffp-purple-50)}
.prose pre{overflow-x:auto;background:var(--ffp-ink-100);padding:16px;border-radius:var(--ffp-r-sm)}
.prose blockquote{margin:1.2em 0;padding:4px 20px;border-left:4px solid var(--ffp-purple-500);background:var(--ffp-purple-50)}
.prose iframe{border:0;width:100%}
.prose iframe[src*="youtube"]{aspect-ratio:16/9;height:auto}

/* Cards and lists */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.card{display:flex;flex-direction:column;gap:8px;padding:16px;border:var(--ffp-stroke-2) solid var(--ffp-black);border-radius:var(--ffp-r-md);background:var(--ffp-white);color:var(--ffp-black);text-decoration:none;box-shadow:var(--ffp-shadow-flat)}
.card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ffp-black);color:var(--ffp-black)}
.card img{border-radius:var(--ffp-r-sm);aspect-ratio:16/9;object-fit:cover;width:100%}
.card-title{font-weight:700;line-height:1.3}
.card-date{font-size:var(--ffp-caption);color:var(--ffp-fg-muted)}
.related{margin-top:56px}
.pager{display:flex;justify-content:space-between;align-items:center;margin:32px 0;font-weight:600}
.cta-box{margin-top:56px;padding:32px;border:var(--ffp-stroke-2) solid var(--ffp-black);border-radius:var(--ffp-r-lg);background:var(--ffp-purple-100);box-shadow:var(--ffp-shadow-flat-lg);text-align:center}
.cta-box h2{margin-top:0}
.ffp-final-card{border:2.5px solid var(--ffp-black);border-radius:var(--ffp-r-lg)}
html{scroll-padding-top:90px}
.guide-popup{border:2.5px solid var(--ffp-black);border-radius:var(--ffp-r-lg);box-shadow:8px 8px 0 0 var(--ffp-black);padding:0;max-width:min(480px,calc(100vw - 32px));width:100%}
.guide-popup::backdrop{background:rgba(10,10,10,.55)}
.guide-popup__form{position:relative;padding:32px;display:flex;flex-direction:column;gap:12px}
.guide-popup h2{font-size:30px;margin:0;line-height:1.05}
.guide-popup p{margin:0;color:var(--ffp-ink-700)}
.guide-popup__label{font-weight:700;font-size:14px;margin-top:6px}
.guide-popup input[type=email]{font:inherit;padding:12px 14px;border:2px solid var(--ffp-black);border-radius:10px}
.guide-popup .ffp-btn{justify-content:center}
.guide-popup__close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer}
.connect-ai{max-width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px)}
.connect-card{border:2px solid var(--ffp-black);border-radius:12px;background:#fff;box-shadow:3px 3px 0 0 var(--ffp-black)}
.connect-card summary{list-style:none;display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer}
.connect-card summary::-webkit-details-marker,.connect-other summary::-webkit-details-marker{display:none}
.connect-card summary small{display:block;color:var(--ffp-fg-muted);font-size:13px;font-weight:500}
.connect-card__icon{width:40px;height:40px;flex:0 0 auto;border-radius:10px;background:var(--ffp-purple-50);border:2px solid var(--ffp-black);display:grid;place-items:center;color:var(--ffp-purple-600,#4b35e0)}
.connect-card__arrow{margin-left:auto;font-size:20px;transition:transform .15s}
.connect-card[open] .connect-card__arrow{transform:rotate(90deg)}
.connect-card ol{margin:0;padding:0 18px 16px 40px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.5}
.connect-card a,.connect-foot a{color:var(--ffp-purple-500);font-weight:700;text-decoration:underline}
.connect-url{display:flex;align-items:center;gap:8px;margin-top:6px;padding:6px 6px 6px 10px;border:1.5px solid var(--ffp-black);border-radius:8px;background:var(--ffp-ink-50)}
.connect-url code{font-family:var(--ffp-font-mono);font-size:13px;overflow-wrap:anywhere;flex:1}
.connect-url .connect-copy{border:1.5px solid var(--ffp-black);background:#fff;border-radius:6px;padding:4px 10px;font-weight:700;font-size:12px;cursor:pointer}
.connect-other{border-top:1.5px solid var(--ffp-ink-200);border-bottom:1.5px solid var(--ffp-ink-200);padding:4px 0}
.connect-other summary{cursor:pointer;font-weight:800;padding:12px 0;display:flex;justify-content:space-between;list-style:none}
.connect-other summary::after{content:"⌄";font-size:20px;line-height:1}
.connect-other[open] summary::after{content:"⌃"}
.connect-other>p{margin:0 0 10px}
.connect-other textarea{width:100%;font:inherit;font-size:14px;line-height:1.5;padding:10px 12px;border:2px solid var(--ffp-black);border-radius:10px;resize:vertical;margin:6px 0 12px;background:#fff}
.connect-other .ffp-btn{width:100%;margin-bottom:10px}
.connect-foot{font-size:14px}
.ai-logos{display:inline-flex;align-items:center;margin-right:2px}
.ai-logos>span{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--ffp-black);display:grid;place-items:center}
.ai-logos>span+span{margin-left:-8px}
[data-connect-ai]:hover .ai-logos>span+span{margin-left:-2px}
.ai-logos>span{transition:margin .15s}
.connect-card__icon{background:#fff}
.ffp-btn--ai{gap:12px;box-shadow:4px 4px 0 0 var(--ffp-purple-500);transition:transform .15s,box-shadow .15s}
.ffp-btn--ai:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ffp-purple-500)}
.ffp-btn--ai .ai-logos>span{width:34px;height:34px}
header a[aria-label="FlatFilePro home"]{flex:0 0 auto}
header a[aria-label="FlatFilePro home"] img{flex:0 0 auto;max-width:none;object-fit:contain}
@media (max-width:420px){header a[aria-label="FlatFilePro home"] img{height:22px !important}header .ffp-container{padding-left:16px !important;padding-right:16px !important;gap:12px !important}header .ffp-btn--sm{padding:9px 14px !important}}
@media (max-width:359px){header .ffp-btn--sm svg{display:none}header .ffp-btn--sm{font-size:13px;padding:8px 12px !important}}
.ffp-menu-btn{display:none;flex:0 0 auto;width:42px;height:42px;border:2px solid var(--ffp-black);border-radius:12px;background:#fff;color:var(--ffp-fg);cursor:pointer;place-items:center;box-shadow:2px 2px 0 0 var(--ffp-black)}
.ffp-mobile-menu{display:flex;flex-direction:column;padding:8px 16px 20px;border-top:1.5px solid var(--ffp-ink-200);background:#fff}
.ffp-mobile-menu[hidden]{display:none}
.ffp-mobile-menu>a:not(.ffp-btn){padding:14px 4px;font-weight:700;font-size:17px;color:var(--ffp-fg);border-bottom:1px solid var(--ffp-ink-200)}
.ffp-mobile-menu .ffp-btn{margin-top:16px;justify-content:center}
@media (max-width:860px){.ffp-menu-btn{display:grid}.ffp-login{display:none}}
@media (min-width:861px){.ffp-mobile-menu{display:none !important}}
/* Homepage review chat demo */
.rv-win{background:#fff;border:2px solid var(--ffp-black);border-radius:14px;overflow:hidden;box-shadow:5px 5px 0 0 var(--ffp-black);display:flex;flex-direction:column}
.rv-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:2px solid var(--ffp-black);background:var(--ffp-ink-50)}
.rv-dot{width:11px;height:11px;border-radius:50%;border:1.5px solid}
.rv-title{margin-left:8px;font-family:var(--ffp-font-mono);font-size:11.5px;color:var(--ffp-fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-tag{margin-left:auto;flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.1em;padding:3px 8px;border-radius:999px;border:1.5px solid var(--ffp-black);background:var(--ffp-warning)}
.rv-tag--ok{background:var(--ffp-success);color:#fff}
.rv-log{padding:16px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.45;max-height:520px;overflow-y:auto}
.rv-me{align-self:flex-end;max-width:85%;background:var(--ffp-purple-500);color:#fff;padding:10px 13px;border-radius:14px 14px 2px 14px;border:2px solid var(--ffp-black)}
.rv-ai{max-width:100%;background:var(--ffp-purple-50);padding:10px 13px;border-radius:14px 14px 14px 2px;border:2px solid var(--ffp-black)}
.rv-ai p{margin:0}.rv-ai p+p{margin-top:8px}
.rv-table{margin-top:10px;border:2px solid var(--ffp-black);border-radius:8px;overflow:hidden;background:#fff}
.rv-row{display:grid;grid-template-columns:22px minmax(0,1.15fr) minmax(0,.8fr) minmax(0,1fr);gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--ffp-ink-200);font-size:12.5px;cursor:pointer}
.rv-head{border-top:0;background:var(--ffp-ink-50);font-family:var(--ffp-font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ffp-fg-muted);cursor:default}
.rv-row input{width:16px;height:16px;margin:0;accent-color:var(--ffp-purple-500);cursor:pointer}
.rv-sku{font-family:var(--ffp-font-mono);font-size:11px;color:var(--ffp-purple-600,#4b35e0);overflow-wrap:anywhere}
.rv-replies{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.rv-replies[hidden]{display:none}
.rv-reply{font:inherit;font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:999px;border:2px solid var(--ffp-black);background:#fff;color:var(--ffp-fg);cursor:pointer;text-decoration:none}
.rv-reply--go{background:var(--ffp-purple-500);color:#fff}
.rv-reply:disabled{opacity:.5;cursor:default}
.rv-compose{display:flex;align-items:center;justify-content:space-between;margin:0 12px 12px;padding:10px 10px 10px 14px;border:1.5px solid var(--ffp-ink-300,#ccc);border-radius:14px;color:var(--ffp-fg-muted);font-size:13.5px}
.rv-send{width:28px;height:28px;border-radius:8px;background:var(--ffp-ink-200);display:grid;place-items:center;font-weight:800;color:#fff}
.rv-status{font-family:var(--ffp-font-mono);font-size:11px;color:var(--ffp-fg-muted);display:flex;align-items:center;gap:6px}
.rv-live{width:8px;height:8px;border-radius:50%;background:var(--ffp-success);animation:rvpulse 1.4s infinite}
.rv-typing{display:inline-flex;gap:4px;align-self:flex-start;padding:12px 14px}
.rv-typing span{width:6px;height:6px;border-radius:50%;background:var(--ffp-ink-500,#888);animation:rvdot 1s infinite}
.rv-typing span:nth-child(2){animation-delay:.15s}.rv-typing span:nth-child(3){animation-delay:.3s}
@keyframes rvdot{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes rvpulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.rv-live,.rv-typing span{animation:none}}
@media (max-width:480px){.rv{padding:14px !important}.rv-row{grid-template-columns:20px minmax(0,1fr) minmax(0,1fr);}.rv-row>span:nth-child(3){display:none}}
.rv{min-width:0}.rv-win{max-width:100%;min-width:0}.rv-bar{min-width:0}.rv-row input:disabled{opacity:.6}
