/*
 * Findfly website – design system v3 (docs/design/FINDFLY-DESIGNSYSTEM.md), Oatly-like:
 * Type (Oatly-like, free OFL fonts): Bricolage Grotesque condensed 800 mixed case + DM Mono body.
 * grid paper, poster type, drawn ink lines, green marker, hand notes, Flo. Hand-made, not template.
 */
@font-face{font-family:"Findfly Display";font-weight:200 800;font-stretch:75% 100%;src:url("fonts/bricolage-latin.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Findfly Text";font-weight:400;src:url("fonts/dmmono-400-latin.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Findfly Text";font-weight:500 800;src:url("fonts/dmmono-500-latin.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Findfly Text";font-style:italic;src:url("fonts/dmmono-400i-latin.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Findfly Hand";src:url("fonts/patrickhand-latin.woff2") format("woff2");font-display:swap}

:root{
  --ink:#0F1115;--paper:#EDF2F7;--ice:#DCEBF7;--green:#22B573;--green-deep:#14864F;--green-soft:#DDF5E8;--graphite:#6B7280;--red:#EF4444;--orange:#F59E0B;
  --display:"Findfly Display","Arial Narrow",sans-serif;--hand:"Findfly Hand","Patrick Hand",cursive;--body:"Findfly Text",ui-monospace,Menlo,monospace;
  --wob-a:3px 1px 4px 2px/1px 4px 2px 3px;--wob-b:1px 4px 2px 3px/4px 2px 3px 1px;
  --marker:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C 46 4, 92 13, 134 7 S 196 5, 216 9' stroke='%2322B573' stroke-width='9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M4 5 C 18 2, 33 9, 33 27' stroke='%230F1115' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M26 21 L33 28 L39 20' stroke='%230F1115' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M18 44 C 14 20, 70 6, 118 9 C 170 12, 196 30, 186 52 C 176 72, 104 76, 60 70 C 26 65, 6 52, 22 30 C 30 19, 48 13, 66 11' stroke='%2322B573' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
html{scroll-behavior:smooth}
body{background-color:var(--paper);background-image:none;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
::selection{background:var(--green);color:var(--ink)}

/* ---------- Header ---------- */
.ff-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:2.5px solid var(--ink);padding:10px clamp(18px,4vw,40px)!important;gap:18px!important}
.admin-bar .ff-header{top:32px}
.ff-logo img{display:block;height:78px;width:auto;margin:-8px 0}
.ff-nav{margin-left:auto}
.ff-nav .wp-block-navigation-item__content{font-weight:600;font-size:15px;color:var(--ink);padding:6px 12px;border:2px solid transparent;border-radius:3px 1px 4px 2px/1px 4px 2px 3px;text-decoration:none}
.ff-nav .wp-block-navigation-item__content:hover{border-color:var(--ink)}
.ff-header-cta .wp-block-button__link{padding:10px 18px!important;font-size:15px!important;background:var(--green)!important;color:var(--ink)!important}
@media (max-width:900px){.ff-header .ff-header-cta{display:none!important}.ff-logo img{height:56px}}

/* ---------- Typography helpers ---------- */
.ff-main{padding-bottom:40px}
.ff-note{font-family:var(--hand);font-size:clamp(19px,1.6vw,23px);line-height:1.3;color:var(--graphite)}
.ff-note.ff-tilt{transform:rotate(-2deg);display:inline-block}
.ff-arrow::after{content:"";display:inline-block;width:34px;height:26px;margin-left:8px;vertical-align:-8px;background:var(--arrow) no-repeat center/contain}
.ff-lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:#2E333B;max-width:42ch}
mark.ff-marker,.ff-marker{background:var(--marker) no-repeat left 92%/100% .32em;color:inherit;padding:0 .04em}
.ff-circled{position:relative;white-space:nowrap;isolation:isolate}
.ff-circled::before{content:"";position:absolute;inset:-.25em -.3em -.2em -.25em;background:var(--circle) no-repeat center/100% 100%;pointer-events:none;z-index:-1}
.ff-poster{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:clamp(56px,9vw,128px);line-height:1.02;letter-spacing:.003em;margin:0}
.ff-poster-s{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:clamp(34px,4.5vw,56px);line-height:.95;margin:0}
.ff-stamp{display:inline-block;border:3px double currentColor;border-radius:1px 4px 2px 3px/4px 2px 3px 1px;padding:4px 14px;font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;letter-spacing:.06em;font-size:17px;transform:rotate(-4deg)}
h2.wp-block-heading{margin-top:0}

/* ---------- Buttons ---------- */
.wp-block-button__link,.ff-btn{display:inline-flex;align-items:center;gap:10px;border:2.5px solid var(--ink)!important;border-radius:3px 1px 4px 2px/1px 4px 2px 3px!important;font-weight:700;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.ff-btn{padding:14px 26px;background:var(--ink);color:#fff}
.wp-block-button__link:hover,.ff-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 -1px var(--green)}
.wp-block-button.is-style-outline .wp-block-button__link{background:#fff!important;color:var(--ink)!important}
.ff-btn-green .wp-block-button__link{background:var(--green)!important;color:var(--ink)!important}

/* ---------- Sections ---------- */
.ff-section{padding-block:clamp(56px,8vw,110px)!important;position:relative}
.ff-section-head{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:end;margin-bottom:clamp(28px,4vw,48px)!important}
.ff-num{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:clamp(70px,9vw,120px);line-height:.8;color:transparent;-webkit-text-stroke:2.5px var(--ink)}
.ff-section-head .ff-note{grid-column:2;margin:0;transform:rotate(-1.5deg);transform-origin:left}
.ff-section-head h2{margin:0}
@media (max-width:700px){.ff-section-head{grid-template-columns:1fr}.ff-section-head .ff-note{grid-column:1}.ff-num{font-size:64px}}

/* Hero */
.ff-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;padding-block:clamp(40px,6vw,80px) clamp(30px,4vw,60px)}
.ff-hero h1{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:clamp(58px,9.5vw,138px);line-height:1.02;margin:.15em 0 .25em}
.ff-hero .ff-lead{margin-bottom:28px}
.ff-hero-art{position:relative;justify-self:center;max-width:460px}
.ff-hero-art>img,.ff-hero-art .ff-flo{display:block;filter:drop-shadow(0 18px 24px rgba(15,17,21,.12))}.ff-hero-art{width:100%}
.ff-hero-art .ff-note{position:absolute;left:-150px;top:-2%;max-width:170px;transform:rotate(-8deg);color:var(--ink)}
.ff-hero-art .ff-note::after{content:"";display:block;width:40px;height:34px;margin:4px 0 0 46px;background:var(--arrow) no-repeat center/contain;transform:rotate(30deg)}
.ff-hero-ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ff-traffic{display:flex;gap:14px;margin-top:22px;font-family:var(--hand);font-size:19px;color:var(--graphite)}
.ff-traffic span{display:inline-flex;align-items:center;gap:6px}
.ff-traffic i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);display:inline-block}
@media (max-width:900px){.ff-hero{grid-template-columns:1fr}.ff-hero-art{max-width:220px;order:-1;margin-bottom:-10px}.ff-hero-art .ff-note{display:none}.ff-hero h1{font-size:clamp(50px,15vw,80px)}}
.ff-float{animation:ff-float 5s ease-in-out infinite}
@keyframes ff-float{50%{transform:translateY(-12px) rotate(1.5deg)}}

/* Problem: sticky notes */
.ff-stickies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,34px)}
.ff-sticky{position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:var(--wob-a);padding:30px 24px 24px;transform:rotate(-1.2deg)}
.ff-sticky:nth-child(2){transform:rotate(1deg);border-radius:var(--wob-b);background:var(--ice)}
.ff-sticky:nth-child(3){transform:rotate(-.6deg)}
.ff-sticky::before{content:"";position:absolute;top:-14px;left:50%;width:90px;height:26px;margin-left:-45px;background:rgba(34,181,115,.35);transform:rotate(-3deg);border-radius:1px 4px 2px 3px/4px 2px 3px 1px}
.ff-sticky h3{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:clamp(26px,2.6vw,34px);line-height:1;margin:0 0 10px}
.ff-sticky p{margin:0;color:#2E333B}
.ff-sticky .ff-light{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);margin-bottom:12px}
@media (max-width:900px){.ff-stickies{grid-template-columns:1fr}}

/* Steps */
.ff-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink)}
.ff-step{padding:28px 26px 30px;border-left:1.5px dashed var(--ink)}
.ff-step:first-child{border-left:0;padding-left:0}
.ff-step b{display:block;font-family:var(--display);font-weight:800;font-stretch:75%;font-size:72px;line-height:.8;color:transparent;-webkit-text-stroke:2.5px var(--ink);margin-bottom:12px}
.ff-step h3{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:clamp(26px,2.4vw,32px);line-height:1;margin:0 0 10px}
.ff-step p{margin:0;color:#2E333B}
.ff-step .ff-note{display:block;margin-top:12px;font-size:19px}
@media (max-width:900px){.ff-steps{grid-template-columns:1fr}.ff-step{border-left:0;border-top:1.5px dashed var(--ink);padding-left:0}.ff-step:first-child{border-top:0}}

/* Features: editorial rows */
.ff-features{border-top:2.5px solid var(--ink)}
.ff-feature{display:grid;grid-template-columns:120px minmax(0,1.1fr) minmax(0,1fr);gap:clamp(16px,3vw,40px);padding:clamp(24px,3vw,38px) 0;border-bottom:1.5px dashed var(--ink);align-items:start}
.ff-feature .ff-ico{width:110px;height:110px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:var(--wob-b);background:#fff;font-family:var(--display);font-weight:800;font-stretch:75%;font-size:46px}
.ff-feature:nth-child(even) .ff-ico{border-radius:var(--wob-a);background:var(--ice)}
.ff-feature h3{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:clamp(30px,3.4vw,48px);line-height:.95;margin:0 0 10px}
.ff-feature p{margin:0 0 10px;color:#2E333B}
.ff-feature ul{margin:0;padding-left:20px;color:#2E333B}
.ff-feature ul li{margin:4px 0}
.ff-feature .ff-note{margin:8px 0 0;transform:rotate(-1.5deg)}
@media (max-width:900px){.ff-feature{grid-template-columns:1fr}.ff-feature .ff-ico{width:80px;height:80px;font-size:34px}}

/* Big green band */
.ff-band{background:var(--green);border-block:2.5px solid var(--ink);padding-block:clamp(60px,9vw,120px)!important;text-align:center;position:relative;overflow:hidden}
.ff-band .ff-poster{max-width:14ch;margin-inline:auto}
.ff-band .ff-circled::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M18 44 C 14 20, 70 6, 118 9 C 170 12, 196 30, 186 52 C 176 72, 104 76, 60 70 C 26 65, 6 52, 22 30 C 30 19, 48 13, 66 11' stroke='%23ffffff' stroke-width='4.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.ff-band .ff-note{color:var(--ink);margin-top:44px;position:relative}
.ff-band-flo{position:absolute;right:4%;bottom:-30px;width:clamp(120px,14vw,200px);transform:rotate(12deg)}
@media (max-width:700px){.ff-band-flo{display:none}}

/* Promise / trust list */
.ff-promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.ff-promise{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1.5px dashed var(--line,#c9d3de)}
.ff-promise i{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--ink);background:var(--green);margin-top:4px}
.ff-promise b{display:block;font-size:18px}
.ff-promise span{color:#2E333B}
@media (max-width:800px){.ff-promises{grid-template-columns:1fr}}

/* Audience cards */
.ff-audience{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,30px)}
.ff-aud{background:#fff;border:2.5px solid var(--ink);border-radius:var(--wob-a);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.ff-aud:nth-child(2){border-radius:var(--wob-b);transform:translateY(18px)}
.ff-aud h3{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:32px;line-height:1;margin:0}
.ff-aud p{margin:0;color:#2E333B}
.ff-aud a{margin-top:auto;font-weight:700}
@media (max-width:900px){.ff-audience{grid-template-columns:1fr}.ff-aud:nth-child(2){transform:none}}

/* Screenshot frame */
.ff-shot{border:2.5px solid var(--ink);border-radius:var(--wob-a);background:#fff;overflow:hidden;transform:rotate(-.6deg)}
.ff-shot::before{content:"";display:block;height:30px;border-bottom:2px solid var(--ink);background:radial-gradient(circle,var(--ink) 3px,transparent 3.5px) 14px 50%/14px 30px repeat-x;background-size:14px 30px;width:100%;background-repeat:no-repeat;background-image:radial-gradient(circle at 18px 15px,var(--ink) 4px,transparent 4.5px),radial-gradient(circle at 34px 15px,var(--ink) 4px,transparent 4.5px),radial-gradient(circle at 50px 15px,var(--ink) 4px,transparent 4.5px)}
.ff-shot img{display:block;width:100%}

/* FAQ */
.ff-faq details{border-bottom:1.5px dashed var(--ink);padding:18px 0}
.ff-faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:clamp(22px,2.2vw,28px);line-height:1.1;display:flex;justify-content:space-between;gap:16px}
.ff-faq summary::-webkit-details-marker{display:none}
.ff-faq summary::after{content:"+";font-family:var(--hand);font-size:34px;line-height:.6;transition:transform .2s}
.ff-faq details[open] summary::after{transform:rotate(45deg)}
.ff-faq details p{margin:12px 0 0;color:#2E333B;max-width:70ch}

/* Final CTA */
.ff-cta{background:#fff;border:2.5px solid var(--ink);border-radius:var(--wob-a);padding:clamp(30px,5vw,60px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center}
.ff-cta img{width:clamp(110px,12vw,170px)}
@media (max-width:800px){.ff-cta{grid-template-columns:1fr}}

/* Packages */
.ff-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,30px);align-items:start}
.ff-pack{background:#fff;border:2.5px solid var(--ink);border-radius:var(--wob-b);padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.ff-pack.is-hot{background:var(--green-soft);transform:translateY(-14px);border-radius:var(--wob-a)}
.ff-pack h3{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:40px;line-height:1;margin:0}
.ff-pack ul{margin:0;padding-left:20px}
.ff-pack li{margin:5px 0}
.ff-pack .ff-stamp{align-self:flex-start}
@media (max-width:900px){.ff-packages{grid-template-columns:1fr}.ff-pack.is-hot{transform:none}}

/* Pages + blog */
.ff-page-title,.ff-pagehead h1,.ff-article-title{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:clamp(46px,7vw,96px)!important;line-height:.92;margin-top:clamp(36px,5vw,70px)!important}
.ff-page-title::after,.ff-pagehead h1::after{content:"";display:block;width:min(280px,70%);height:16px;margin-top:10px;background:var(--marker) no-repeat center/100% 100%}
.ff-pagehead{padding-bottom:20px}
.ff-cards{gap:24px!important}
.ff-card{background:#fff;border:2.5px solid var(--ink);border-radius:var(--wob-a);padding:0 0 18px;overflow:hidden}
.ff-card:nth-child(even){border-radius:var(--wob-b)}
.ff-card>*:not(.wp-block-post-featured-image){padding-inline:20px}
.ff-card .wp-block-post-featured-image{margin:0 0 14px;border-bottom:2px solid var(--ink)}
.ff-card h3{font-size:26px!important;line-height:1.02}
.ff-card h3 a{color:var(--ink);text-decoration:none}
.ff-empty{font-family:var(--hand);font-size:22px;color:var(--graphite);border:2px dashed var(--graphite);border-radius:3px 1px 4px 2px/1px 4px 2px 3px;padding:30px;text-align:center}
.ff-article .wp-block-post-content{font-size:18.5px;line-height:1.72}
.ff-article .wp-block-post-content h2{font-size:clamp(30px,3.2vw,42px);margin-top:1.6em}
.ff-article .wp-block-post-content h3{font-size:clamp(22px,2.2vw,28px);margin-top:1.4em}
.ff-article .wp-block-post-content>p:first-child{font-size:21px;border-left:4px solid var(--green);padding-left:16px}
.ff-article-meta{font-family:var(--hand);font-size:18px;color:var(--graphite);gap:16px!important}
.ff-article-image img{border:2.5px solid var(--ink);border-radius:var(--wob-a)}
.ff-article .wp-block-details{border-bottom:1.5px dashed var(--ink);padding:12px 0}
.ff-article .wp-block-details summary{font-weight:700;cursor:pointer}

/* Footer */
.ff-footer{background:#fff;border-top:2.5px solid var(--ink);padding:clamp(40px,5vw,64px) clamp(18px,4vw,40px) 28px!important;margin-top:60px}
.ff-footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);gap:30px;align-items:end;max-width:1240px;margin:0 auto}
.ff-footer-flo{width:110px;transform:rotate(-8deg)}
.ff-footer-nav{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ff-footer-nav a{color:var(--ink);font-weight:600;text-decoration:none}
.ff-footer-nav a:hover{text-decoration:underline}
.ff-footer-by{max-width:1240px;margin:26px auto 0;padding-top:16px;border-top:1.5px dashed var(--ink);font-family:var(--hand);font-size:17px;color:var(--graphite)}
@media (max-width:800px){.ff-footer-grid{grid-template-columns:1fr}}

/* 404 + coming soon */
.ff-404-box,.ff-soon{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:40px 20px}
.ff-soon-body{margin:0}
.ff-soon{min-height:100vh}
.ff-soon-logo{width:260px}
.ff-soon-flo{width:clamp(160px,22vw,240px)}
.ff-soon h1,.ff-404-box h1{font-family:var(--display);font-weight:800;font-stretch:75%;text-transform:none;font-size:clamp(46px,8vw,104px);line-height:.92;margin:0;max-width:13ch}
.ff-soon .ff-note{max-width:36ch}
.ff-soon-by{font-size:14px;color:var(--graphite)}

/* Reveal on scroll */
.ff-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ff-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ff-float{animation:none}.ff-reveal{opacity:1;transform:none}}

/* ---------- Type v4: condensed grotesk headlines, mono body ---------- */
h1,h2,h3,h4,.ff-poster,.ff-poster-s{letter-spacing:-.015em}
.ff-hero h1,.ff-poster{line-height:.92}
body{font-size:16.5px;line-height:1.55;letter-spacing:-.01em}
strong,b{font-weight:500}

/* Pen-drawn box outlines (square, slightly crooked, lines overshoot the corners) */
:root{--pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%230F1115' stroke-width='3' fill='none' stroke-linecap='butt'%3E%3Cpath d='M2.2 4.4 C 30 3.6, 70 4.8, 98.2 3.4'/%3E%3Cpath d='M96.4 2 C 95.8 30, 97 70, 96.2 98.2'/%3E%3Cpath d='M98 96 C 70 97, 30 95.7, 2.4 96.8'/%3E%3Cpath d='M3.9 98.2 C 4.5 70, 3.3 30, 4.1 2.2'/%3E%3C/g%3E%3C/svg%3E")}
.ff-article-image img,.ff-aud,.ff-aud:nth-child(2),.ff-card,.ff-card:nth-child(even),.ff-feature .ff-ico,.ff-feature:nth-child(even) .ff-ico,.ff-pack,.ff-pack.is-hot,.ff-sticky,.ff-sticky:nth-child(2),/* Final CTA */
.ff-cta,/* Screenshot frame */
.ff-shot{border-image:var(--pen) 9 / 9px / 0 stretch;border-width:3px;border-style:solid;background-clip:padding-box}

/* ---------- Doodles (spray-style, drawn in-house) & post-its ---------- */
.ff-section,.ff-hero>div:first-child{position:relative}
.ff-doodle{position:absolute;pointer-events:none;width:clamp(90px,11vw,170px);height:auto;z-index:0;opacity:.95}
.ff-section>*:not(.ff-doodle):not(.ff-postit){position:relative;z-index:1}
.ff-postit{position:absolute;z-index:2;width:210px;margin:0;padding:22px 18px 18px;background:#FFE873;color:var(--ink);font-family:var(--hand);font-size:20px;line-height:1.2;transform:rotate(var(--rot,-3deg));box-shadow:0 10px 18px -8px rgba(15,17,21,.35);clip-path:polygon(0 1%,100% 0,99% 96%,93% 100%,0 99%)}
.ff-postit::before{content:"";position:absolute;left:50%;top:-10px;width:70px;height:22px;margin-left:-35px;background:rgba(255,255,255,.55);transform:rotate(-4deg)}
.ff-postit.is-green{background:#BDF0D2}.ff-postit.is-pink{background:#FFC9D6}
@media (max-width:1100px){.ff-postit{position:static;margin:0 0 28px auto;transform:rotate(var(--rot,-2deg))}.ff-doodle{width:84px!important}}
@media (max-width:700px){.ff-doodle{display:none}.ff-postit{margin:0 auto 28px}}
@media (min-width:1101px){.ff-section-head{max-width:66%}.ff-section>.ff-postit{top:-34px!important}}

/* ---------- Motion (all off with prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* post-its get slapped on the wall */
  .ff-anim .ff-postit{opacity:0;scale:1.5;translate:0 -30px}
  .ff-anim .ff-postit.is-in{animation:ff-slap .55s cubic-bezier(.3,1.6,.5,1) forwards}
  @keyframes ff-slap{60%{opacity:1;scale:.94;translate:0 2px}100%{opacity:1;scale:1;translate:0 0}}
  .ff-postit:hover{animation:ff-flap .5s ease-in-out}
  @keyframes ff-flap{30%{rotate:-3deg}70%{rotate:2deg}}
  /* doodles spray in, then keep wiggling */
  .ff-anim .ff-doodle{opacity:0;scale:.4;filter:blur(6px)}
  .ff-anim .ff-doodle.is-in{animation:ff-spray .7s cubic-bezier(.2,1.4,.4,1) forwards,ff-wiggle 4.5s ease-in-out .8s infinite}
  @keyframes ff-spray{70%{opacity:1;filter:blur(0);scale:1.08}100%{opacity:.95;filter:blur(0);scale:1}}
  @keyframes ff-wiggle{25%{rotate:-4deg}50%{rotate:0deg;translate:0 -4px}75%{rotate:3deg}}
  .ff-doodle-hero.is-in{animation:ff-spray .7s forwards,ff-twinkle 1.8s ease-in-out .8s infinite}
  @keyframes ff-twinkle{50%{scale:.75;rotate:45deg}}
  /* marker strokes and circles draw themselves */
  .ff-anim .ff-marker{background-size:0% .32em;transition:background-size .9s cubic-bezier(.6,0,.2,1) .25s}
  .ff-anim .ff-marker.is-in{background-size:100% .32em}
  .ff-anim .ff-circled::before{clip-path:inset(0 100% 0 0);transition:clip-path .9s ease .3s}
  .ff-anim .ff-circled.is-in::before{clip-path:inset(0 0 0 0)}
  /* buttons and cards react */
  .ff-btn,.wp-element-button{transition:translate .15s ease,box-shadow .15s ease,rotate .15s ease}
  .ff-btn:hover,.wp-element-button:hover{translate:-2px -2px;rotate:-1.5deg;box-shadow:4px 4px 0 var(--green)}
  .ff-sticky,.ff-aud,.ff-pack{transition:rotate .25s ease,translate .25s ease}
  .ff-sticky:hover,.ff-aud:hover,.ff-pack:hover{rotate:-1deg;translate:0 -4px}
  .ff-feature .ff-ico{transition:rotate .3s cubic-bezier(.3,1.6,.5,1)}
  .ff-feature:hover .ff-ico{rotate:-10deg}
  /* hero headline lands word by word */
  .ff-hero h1{animation:ff-land .8s cubic-bezier(.2,1.3,.4,1) both}
  @keyframes ff-land{0%{opacity:0;translate:0 40px;rotate:-2deg}}
  .ff-traffic i{animation:ff-blink 3s steps(1) infinite}
  .ff-traffic span:nth-child(2) i{animation-delay:1s}.ff-traffic span:nth-child(3) i{animation-delay:2s}
  @keyframes ff-blink{0%,33%{box-shadow:0 0 0 4px rgba(34,181,115,.0)}34%,66%{box-shadow:0 0 0 5px rgba(15,17,21,.12)}}
}

/* Flying Flo */
.ff-flyer{position:absolute;left:0;top:0;z-index:60;pointer-events:none;opacity:0;transition:opacity .3s}
.ff-flyer.is-on{opacity:1}
.ff-flyer .ff-flo{width:70px;animation:ff-buzz .12s linear infinite alternate;filter:drop-shadow(0 6px 8px rgba(15,17,21,.2))}
@keyframes ff-buzz{to{translate:0 -2px;rotate:2deg}}
.ff-flyer.is-glowing .ff-flo{animation:ff-buzz .12s linear infinite alternate,ff-glow .45s ease-in-out infinite alternate}
@keyframes ff-glow{to{filter:drop-shadow(0 0 14px #22B573) drop-shadow(0 0 30px rgba(34,181,115,.7)) brightness(1.15)}}
.ff-light{transition:background .4s ease,box-shadow .4s ease}
.ff-light.is-fixing{animation:ff-heat .3s ease-in-out infinite alternate}
@keyframes ff-heat{from{box-shadow:0 0 0 2px rgba(239,68,68,.35)}to{box-shadow:0 0 0 7px rgba(245,158,11,.45);background:#F59E0B!important}}
.ff-light.is-fixed{box-shadow:0 0 0 4px rgba(34,181,115,.25),0 0 18px rgba(34,181,115,.8);animation:ff-pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes ff-pop{40%{scale:1.8}}
.ff-fixed-note{position:absolute;left:58px;top:8px;font-family:var(--hand);font-size:19px;color:var(--green-deep);rotate:-6deg;animation:ff-slap .5s cubic-bezier(.3,1.6,.5,1) both}
.ff-sticky{position:relative}

/* ---------- Flo with flapping wings (layered PNGs: glow, wings L/R, body) ---------- */
.ff-flo{position:relative;width:100%;max-width:460px;aspect-ratio:460/614}
.ff-flo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ff-flo-wl{transform-origin:47% 48%}.ff-flo-wr{transform-origin:55% 48%}
.ff-flo-cta{width:170px}
@media (prefers-reduced-motion:no-preference){
  .ff-flo-wl{animation:ff-flap-l .16s ease-in-out infinite alternate}
  .ff-flo-wr{animation:ff-flap-r .16s ease-in-out infinite alternate}
  @keyframes ff-flap-l{from{transform:rotate(6deg) scaleY(1)}to{transform:rotate(-16deg) scaleY(.82)}}
  @keyframes ff-flap-r{from{transform:rotate(-6deg) scaleY(1)}to{transform:rotate(16deg) scaleY(.82)}}
  .ff-flo-glow{animation:ff-pulse 2.4s ease-in-out infinite}
  @keyframes ff-pulse{50%{opacity:.6;filter:brightness(1.25)}}
}
@media (min-width:901px){.ff-header{flex-wrap:nowrap!important}}
@media (min-width:901px) and (max-width:1180px){.ff-nav .wp-block-navigation-item__content{font-size:14px}.ff-header{gap:10px!important}.ff-header-cta .wp-block-button__link{padding:8px 12px!important;font-size:14px!important}}
@media (max-width:1280px){.ff-doodle-hero{display:none}}

/* ---------- Polaroids (instant-film photos with handwritten captions) ---------- */
.ff-polaroid{position:relative;margin:0;rotate:var(--rot,0deg);box-shadow:0 14px 28px -12px rgba(15,17,21,.45);background:#fff;transition:rotate .3s ease,scale .3s ease,box-shadow .3s ease}
.ff-polaroid img{display:block;width:100%;height:auto}
.ff-polaroid figcaption{position:absolute;left:8%;right:8%;bottom:3.5%;font-family:var(--hand);font-size:clamp(15px,1.35vw,20px);line-height:1.15;color:var(--ink);text-align:center}
.ff-polaroid:hover{rotate:0deg;scale:1.04;z-index:3;box-shadow:0 22px 40px -14px rgba(15,17,21,.5)}
.ff-album{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.ff-album .ff-polaroid:nth-child(4n+2){margin-top:26px}.ff-album .ff-polaroid:nth-child(4n){margin-top:14px}
.ff-head-plain{display:block}
.ff-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);padding-block:10px 0!important}
.ff-strip-2{grid-template-columns:repeat(2,minmax(0,280px));margin-top:50px}
.ff-polaroid-solo{max-width:300px;margin:10px auto 26px}
@media (max-width:900px){.ff-album,.ff-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.ff-album .ff-polaroid{margin-top:0!important}}
@media (prefers-reduced-motion:no-preference){
  .ff-anim .ff-polaroid{opacity:0;translate:0 40px}
  .ff-anim .ff-polaroid.is-in{opacity:1;translate:0 0;transition:opacity .5s ease,translate .6s cubic-bezier(.2,1.3,.4,1),rotate .3s ease,scale .3s ease}
}
html,body{overflow-x:clip}
.ff-polaroid figcaption{bottom:2.2%;font-size:clamp(14px,1.2vw,18px)}
@media (min-width:901px) and (max-width:1180px){.ff-nav .wp-block-navigation__container{gap:16px!important;flex-wrap:nowrap!important}.ff-header-cta .wp-block-button__link{white-space:nowrap}}
.ff-nav .wp-block-navigation-item__content{white-space:nowrap}

/* Flo: own rays (round the whole bug) + firefly flash rhythm for glow, rays and tail light */
.ff-flo-rays{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ff-flo-rays line{stroke:#2BB673;stroke-width:13;stroke-linecap:round;transform-box:view-box;transform-origin:228px 335px}
.ff-flo-light{position:absolute;left:33%;top:46%;width:32%;height:40%;border-radius:50%;background:radial-gradient(closest-side,rgba(220,255,225,.95),rgba(60,232,120,.55) 55%,rgba(34,197,94,0));mix-blend-mode:screen;opacity:.35;z-index:1}
.ff-flo-body{z-index:0}.ff-flo-light{pointer-events:none}
.ff-flo .ff-flo-body{position:absolute}.ff-flo .ff-flo-light{order:9}
@media (prefers-reduced-motion:no-preference){
  .ff-flo-glow{animation:ff-flash 3.4s ease-in-out infinite}
  .ff-flo-light{animation:ff-flash-light 3.4s ease-in-out infinite}
  .ff-flo-rays line{animation:ff-ray 3.4s ease-in-out infinite;animation-delay:var(--d)}
  @keyframes ff-flash{0%,100%{opacity:.45;filter:none}6%{opacity:1;filter:brightness(1.3)}12%{opacity:.55}19%{opacity:1;filter:brightness(1.4)}36%{opacity:.45;filter:none}}
  @keyframes ff-flash-light{0%,100%{opacity:.15}6%{opacity:.9}12%{opacity:.35}19%{opacity:1}36%{opacity:.15}}
  @keyframes ff-ray{0%,100%{opacity:.55;scale:.94}6%{opacity:1;scale:1.07}12%{opacity:.7;scale:.98}19%{opacity:1;scale:1.1}36%{opacity:.55;scale:.94}}
}

/* ---------- "Was ist Findfly?" explainer, specs, tiers ---------- */
.ff-define{max-width:62ch;font-size:clamp(17px,1.4vw,20px)}
.ff-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3.4vw,54px);margin:36px 0 30px;position:relative}
.ff-flow-step{position:relative;background:#fff;border:2.5px solid var(--ink);border-radius:var(--wob-a);border-image:var(--pen) 9 / 9px / 0 stretch;background-clip:padding-box;padding:26px 20px 20px}
.ff-flow-step:nth-child(even){rotate:.6deg}.ff-flow-step:nth-child(odd){rotate:-.5deg}
.ff-flow-step.is-you{background:var(--green-soft)}
.ff-flow-step h3{margin:6px 0 8px;font-size:26px}
.ff-flow-step p{margin:0 0 12px;font-size:15px}
.ff-flow-step small{font-family:var(--hand);font-size:16px;color:var(--green-deep)}
.ff-flow-n{position:absolute;top:-22px;left:16px;width:40px;height:40px;border-radius:50%;background:var(--green);border:2.5px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-stretch:75%;font-size:22px}
.ff-flow-step:not(:last-child)::after{content:"";position:absolute;right:calc(-1 * clamp(26px,3.4vw,54px) + 2px);top:42%;width:clamp(24px,3vw,50px);height:30px;background:var(--arrow) no-repeat center/contain;rotate:-70deg}
.ff-equation{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:clamp(24px,2.6vw,36px);line-height:1.1;letter-spacing:-.01em;max-width:30ch}
.ff-equation .ff-note{display:block;font-size:20px;margin-top:6px}
.ff-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.ff-specs>div{border-top:2.5px solid var(--ink);padding-top:14px}
.ff-specs h3{font-size:28px;margin:0 0 10px}
.ff-specs ul{list-style:none;margin:0;padding:0}
.ff-specs li{padding:8px 0 8px 26px;border-bottom:1.5px dashed rgba(15,17,21,.25);font-size:14.5px;position:relative}
.ff-specs li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--green-deep);font-weight:500}
.ff-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.ff-tier{position:relative;background:#fff;border:2.5px solid var(--ink);border-image:var(--pen) 9 / 9px / 0 stretch;background-clip:padding-box;padding:30px 20px 20px;transition:rotate .25s ease,translate .25s ease}
.ff-tier.is-hot{background:var(--green-soft);rotate:-1deg}
.ff-tier:hover{rotate:1deg;translate:0 -4px}
.ff-tier .ff-stamp{position:absolute;top:-14px;left:14px}
.ff-tier h3{font-size:26px;margin:4px 0 8px}.ff-tier p{font-size:15px;margin:0 0 12px}
.ff-tier small{font-family:var(--hand);font-size:17px;color:var(--graphite)}
.ff-soon{margin-top:34px;max-width:72ch;font-size:16px}
.ff-soon .ff-stamp{margin-right:6px}
@media (max-width:1200px){.ff-flow,.ff-specs,.ff-tiers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}.ff-flow-step::after{display:none}}
@media (max-width:620px){.ff-flow,.ff-specs,.ff-tiers{grid-template-columns:1fr}}

/* Polaroids placed next to the topic they illustrate */
.ff-feature{grid-template-columns:80px minmax(0,1.3fr) minmax(0,1fr) 200px!important;align-items:center}
.ff-polaroid-side{width:200px}
.ff-polaroid-step{width:min(240px,100%);margin:0 0 22px}
.ff-polaroid-card{width:78%;margin:-48px auto 18px}
.ff-audience{margin-top:56px}
.ff-polaroid-head{position:absolute;right:2%;top:-30px;width:200px;z-index:2}
@media (min-width:1101px){#problem .ff-postit{right:24%!important}}
@media (max-width:1100px){.ff-polaroid-head{position:static;margin:0 0 24px auto}}
@media (max-width:900px){.ff-feature{grid-template-columns:1fr!important}.ff-polaroid-side{width:220px;margin:6px 0 0}.ff-polaroid-card{width:70%}}

/* ---------- Plakativ: big post-its, bigger photos, visible hero star ---------- */
.ff-postit{width:clamp(250px,24vw,340px);padding:34px 26px 28px;font-size:clamp(23px,2vw,31px);line-height:1.12;box-shadow:0 18px 30px -12px rgba(15,17,21,.45),0 2px 0 rgba(15,17,21,.08)}
.ff-postit::before{width:96px;height:28px;margin-left:-48px;top:-13px}
@media (min-width:1101px){
  .ff-section>.ff-postit{right:1%;top:-20px!important;left:auto}
  #problem .ff-postit.ff-slot-collage{right:15%!important;top:150px!important}
  .ff-section-head{max-width:60%}
}
.ff-star{display:inline-block;width:.55em;height:.55em;vertical-align:.35em;margin:0 .02em 0 .06em}
@media (prefers-reduced-motion:no-preference){.ff-star{animation:ff-twinkle 1.8s ease-in-out infinite}}
.ff-polaroid-side{width:clamp(220px,22vw,320px)}
.ff-feature{grid-template-columns:70px minmax(0,1.2fr) minmax(0,.9fr) clamp(220px,22vw,320px)!important}
.ff-polaroid-step{width:min(340px,100%)}
.ff-polaroid-card{width:94%;margin:-56px auto 20px}
.ff-polaroid-head{width:clamp(220px,22vw,300px);top:-40px}
#problem{padding-top:clamp(120px,12vw,180px)!important}
.ff-polaroid figcaption{font-size:clamp(15px,1.4vw,21px)}
@media (max-width:1100px){.ff-section>.ff-postit{position:static;display:block;margin:0 0 30px auto}#problem .ff-postit.ff-slot-collage{margin-top:-60px;position:relative;z-index:3}}
@media (max-width:700px){.ff-postit{width:86%;font-size:24px;margin:0 auto 30px!important}.ff-polaroid-side{width:80%}}
/* plakativ, round 2 */
.ff-postit{width:clamp(280px,27vw,400px);font-size:clamp(26px,2.4vw,38px);padding:40px 30px 32px}
.ff-star{width:.85em;height:.85em;vertical-align:.12em;margin:0 .04em 0 .1em}
@media (min-width:1101px){
  .ff-section>.ff-polaroid-head{position:absolute!important;right:3%;top:-10px;width:clamp(260px,24vw,340px);z-index:2}
  #problem .ff-postit.ff-slot-collage{right:22%!important;top:190px!important;z-index:3}
  #problem{padding-top:clamp(150px,14vw,220px)!important}
}
@media (min-width:1101px){#problem .ff-section-head{max-width:50%}#problem .ff-postit.ff-slot-collage{right:20%!important;top:250px!important}}

/* ---------- Free check ---------- */
.ff-check-form{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 10px}
.ff-check-form input{flex:1;min-width:220px;padding:16px 18px;border:2.5px solid var(--ink);border-radius:var(--wob-a);font:500 18px var(--body);background:#fff}
.ff-check-form input:focus{outline:3px solid var(--green);outline-offset:2px}
.ff-check-note{display:block;color:var(--graphite);font-size:13px;max-width:60ch}
.ff-check-res{margin-top:34px}
.ff-scan{position:relative;overflow:hidden;border:2.5px solid var(--ink);border-image:var(--pen) 9 / 9px / 0 stretch;background:#fff;padding:26px 22px;font-family:var(--hand);font-size:24px}
.ff-scan-bar{position:absolute;top:0;bottom:0;width:120px;background:linear-gradient(90deg,transparent,rgba(34,181,115,.45),transparent);animation:ff-scanbar 1.1s linear infinite}
@keyframes ff-scanbar{from{left:-120px}to{left:100%}}
.ff-check-err{font-family:var(--hand);font-size:22px;color:var(--red)}
.ff-res-top{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-bottom:28px}
.ff-res-top h3{font-size:clamp(28px,3vw,44px);margin:0;word-break:break-all}
.ff-res-top .ff-note{margin:0}
.ff-res-top .ff-postit{position:static;width:clamp(240px,24vw,340px);font-size:clamp(20px,1.8vw,28px)}
.ff-postit.is-yellow{background:#FFE873}
.ff-res-score{width:150px;height:150px;border-radius:50%;border:10px solid var(--red);display:grid;place-content:center;text-align:center;background:#fff}
.is-warn .ff-res-score,.ff-res-top.is-warn .ff-res-score{border-color:var(--orange)}.ff-res-top.is-ok .ff-res-score{border-color:var(--green)}
.ff-res-score b{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:58px;line-height:1}
.ff-res-score small{font-size:13px;color:var(--graphite)}
.ff-res-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
.ff-res-area{background:#fff;border:2.5px solid var(--ink);border-image:var(--pen) 9 / 9px / 0 stretch;background-clip:padding-box;padding:20px}
.ff-res-area-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);margin-bottom:10px;padding-bottom:8px}
.ff-res-area-head h3{margin:0;font-size:28px}
.ff-res-area-head b{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:40px}
.ff-res-area.is-ok .ff-res-area-head b{color:var(--green-deep)}.ff-res-area.is-warn .ff-res-area-head b{color:#a76a00}.ff-res-area.is-bad .ff-res-area-head b{color:#c23a3a}
.ff-res-area ul{list-style:none;margin:0;padding:0}
.ff-res-area li{display:flex;gap:12px;padding:9px 0;border-bottom:1.5px dashed rgba(15,17,21,.2)}
.ff-res-area li i{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);margin-top:4px}
.ff-res-area li.is-ok i{background:var(--green)}.ff-res-area li.is-warn i{background:var(--orange)}.ff-res-area li.is-bad i{background:var(--red)}
.ff-res-area li b{font-weight:500;display:block}
.ff-res-area li span{display:block;font-size:13.5px;color:var(--graphite)}
.ff-psi{margin-top:12px;padding:12px 14px;background:var(--paper);font-size:14px}
.ff-psi b{display:block;font-weight:500}.ff-psi span{display:block;color:var(--graphite)}
.ff-res-cta{margin:30px 0 12px;padding:24px;background:var(--ink);color:#fff;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.ff-res-cta b{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:32px}
.ff-res-cta span{flex:1;min-width:220px}
.ff-res-cta .ff-btn{background:var(--green);color:var(--ink);border-color:var(--green)}
@media (max-width:800px){.ff-res-grid{grid-template-columns:1fr}.ff-res-top{grid-template-columns:1fr}.ff-res-score{width:120px;height:120px}}

.ff-band-flo.ff-flo{position:absolute;right:4%;bottom:-20px;width:clamp(140px,15vw,220px);rotate:12deg}
.ff-footer-flo.ff-flo{width:110px}
.ff-soon-flo.ff-flo{width:240px;margin:0 auto}

/* ---------- Mega menu header ---------- */
.ff-header.ff-mega{position:sticky;top:0;z-index:50;background:rgba(237,242,247,.94);backdrop-filter:blur(8px);border-bottom:2.5px solid var(--ink);padding:0!important}
.admin-bar .ff-header.ff-mega{top:32px}
.ff-header-in{max-width:1240px;margin:0 auto;padding:10px clamp(16px,4vw,24px);display:flex;align-items:center;gap:24px}
.ff-menu{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:22px}
.ff-menu-list{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:center}
.ff-menu-list>li{position:relative}
.ff-menu-top{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:500 16px var(--body);color:var(--ink);text-decoration:none;padding:12px 14px;white-space:nowrap}
.ff-has-panel>.ff-menu-top::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -3px;transition:rotate .2s}
.ff-menu-top:hover,.ff-has-panel:hover>.ff-menu-top,.ff-has-panel.is-open>.ff-menu-top{background:var(--green);border-radius:var(--wob-a)}
.ff-menu-cta{padding:11px 20px!important;font-size:15px!important;white-space:nowrap;background:var(--green)!important;color:var(--ink)!important}
.ff-panel{position:absolute;top:calc(100% + 14px);left:50%;translate:-30% 0;width:min(760px,92vw);display:grid;grid-template-columns:1.4fr 1fr;gap:18px;padding:22px;background:#fff;border:2.5px solid var(--ink);border-image:var(--pen) 9 / 9px / 0 stretch;background-clip:padding-box;box-shadow:0 26px 40px -18px rgba(15,17,21,.45);opacity:0;visibility:hidden;rotate:-1deg;scale:.96;transform-origin:30% 0;transition:opacity .18s ease,scale .25s cubic-bezier(.3,1.6,.5,1),rotate .25s ease,visibility 0s .2s}
.ff-has-panel:hover .ff-panel,.ff-has-panel:focus-within .ff-panel,.ff-has-panel.is-open .ff-panel{opacity:1;visibility:visible;rotate:0deg;scale:1;transition-delay:0s}
.ff-has-panel:hover>.ff-menu-top::after,.ff-has-panel.is-open>.ff-menu-top::after{rotate:225deg;translate:0 2px}
.ff-panel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.ff-panel-links{display:grid;gap:2px}
.ff-panel-links a{display:block;padding:10px 12px;text-decoration:none;color:var(--ink);border-radius:var(--wob-b);transition:background .15s,translate .15s}
.ff-panel-links a:hover{background:var(--green-soft);translate:4px 0}
.ff-panel-links b{display:block;font-family:var(--display);font-weight:800;font-stretch:75%;font-size:22px;letter-spacing:-.01em}
.ff-panel-links span{display:block;font-size:13.5px;color:var(--graphite)}
.ff-badge{font-style:normal;font-family:var(--hand);font-weight:400;font-size:15px;background:#FFE873;padding:1px 8px;margin-left:6px;rotate:-4deg;display:inline-block}
.ff-panel-card{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--ink);color:#fff;text-decoration:none;rotate:1.5deg;transition:rotate .2s}
.ff-panel-card:hover{rotate:0deg}
.ff-panel-card b{font-family:var(--display);font-weight:800;font-stretch:75%;font-size:28px;line-height:1}
.ff-panel-card .ff-note{color:var(--green)}
.ff-panel-card em{font-style:normal;color:var(--green);margin-top:auto}
.ff-panel-card.is-photo{background:#fff;color:var(--ink);padding:12px 12px 16px;box-shadow:0 12px 24px -12px rgba(15,17,21,.5)}
.ff-panel-card.is-photo img{width:100%;height:auto;display:block}
.ff-panel-card.is-photo em{color:var(--green-deep)}
.ff-burger{display:none;margin-left:auto;width:48px;height:44px;border:2.5px solid var(--ink);background:#fff;border-radius:var(--wob-a);padding:10px;cursor:pointer;flex-direction:column;justify-content:space-between}
.ff-burger span{display:block;height:3px;background:var(--ink);transition:rotate .2s,translate .2s,opacity .2s}
.ff-burger[aria-expanded="true"] span:nth-child(1){translate:0 8.5px;rotate:45deg}.ff-burger[aria-expanded="true"] span:nth-child(2){opacity:0}.ff-burger[aria-expanded="true"] span:nth-child(3){translate:0 -8.5px;rotate:-45deg}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:980px){
  .ff-burger{display:flex}
  .ff-menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:2.5px solid var(--ink);flex-direction:column;align-items:stretch;padding:12px 16px 22px;max-height:calc(100vh - 80px);overflow:auto}
  .ff-mega.is-open .ff-menu{display:flex}
  .ff-menu-list{flex-direction:column;align-items:stretch}
  .ff-menu-top{width:100%;justify-content:space-between;font-size:22px;font-family:var(--display);font-weight:800;font-stretch:75%}
  .ff-panel{position:static;translate:none;width:auto;grid-template-columns:1fr;display:none;opacity:1;visibility:visible;rotate:0deg;scale:1;margin:4px 0 10px;box-shadow:none}
  .ff-has-panel.is-open .ff-panel{display:grid}
  .ff-has-panel:hover .ff-panel{display:none}.ff-has-panel.is-open:hover .ff-panel{display:grid}
  .ff-panel-card.is-photo{display:none}
  .ff-menu-cta{align-self:flex-start;margin-top:10px}
}

.ff-more{margin-top:12px}
.ff-more summary{cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-family:var(--hand);font-size:20px;color:var(--green-deep);list-style:none}
.ff-more summary::-webkit-details-marker{display:none}
.ff-more summary::before{content:"+";display:grid;place-items:center;width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;font-family:var(--body);font-size:16px;color:var(--ink);transition:rotate .25s}
.ff-more[open] summary::before{rotate:45deg;background:var(--green)}
.ff-more p{margin:10px 0 0;padding:14px 16px;background:#fff;border-left:4px solid var(--green);font-size:14.5px;animation:ff-slap .4s cubic-bezier(.3,1.6,.5,1)}
/* Legal pages */
.ff-legal{max-width:760px}
.ff-legal h2{font-size:clamp(26px,2.6vw,34px);margin:44px 0 10px}
.ff-legal p,.ff-legal li{font-size:15.5px;line-height:1.65}
.ff-legal ul{padding-left:20px}
.ff-legal-draft{background:#FFE873;padding:16px 20px;margin-bottom:28px;rotate:-.6deg;box-shadow:0 10px 18px -10px rgba(15,17,21,.4);font-size:14.5px}

/* ---------- Fixes: icon boxes inside their column, pen boxes without white fringe ---------- */
.ff-feature{grid-template-columns:96px minmax(0,1.2fr) minmax(0,.9fr) clamp(220px,22vw,320px)!important}
.ff-feature .ff-ico{width:88px;height:88px;font-size:38px}
@media (max-width:900px){.ff-feature{grid-template-columns:1fr!important}.ff-feature .ff-ico{width:72px;height:72px;font-size:30px}}
.ff-sticky,.ff-aud,.ff-pack,.ff-card,.ff-tier,.ff-flow-step,.ff-res-area,.ff-scan,.ff-cta{border-width:5px!important}
.ff-tier .ff-stamp{top:-22px;background:var(--paper);z-index:2}
.ff-pack .ff-stamp{background:var(--paper)}

/* ---------- Flo in action: figure-eight hover, banking, a roll every few seconds ---------- */
@media (prefers-reduced-motion:no-preference){
  .ff-hero-art .ff-flo.ff-float,.ff-flo-cta,.ff-band-flo.ff-flo{animation:ff-fig8 7s ease-in-out infinite,ff-bank 7s ease-in-out infinite}
  .ff-flo-cta{animation-duration:6s,6s}
  .ff-band-flo.ff-flo{animation:ff-fig8 5s ease-in-out infinite,ff-roll 9s ease-in-out infinite}
  @keyframes ff-fig8{0%,100%{translate:0 0}25%{translate:22px -18px}50%{translate:0 -6px}75%{translate:-22px -20px}}
  @keyframes ff-bank{0%,100%{rotate:0deg}20%{rotate:9deg}45%{rotate:-4deg}60%{rotate:-10deg}70%{rotate:-10deg}78%{rotate:350deg}90%{rotate:360deg}}
  @keyframes ff-roll{0%,70%,100%{rotate:12deg}80%{rotate:-20deg}92%{rotate:372deg}}
}

/* ---------- Big traffic light under the hero CTA ---------- */
.ff-traffic{display:inline-flex!important;gap:22px;align-items:center;margin-top:26px!important;padding:14px 22px;background:var(--ink);border-radius:3px 1px 4px 2px/1px 4px 2px 3px;rotate:-1.5deg;box-shadow:6px 6px 0 var(--green)}
.ff-traffic span{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--hand);font-size:20px;color:#fff}
.ff-traffic i{display:block!important;width:46px!important;height:46px!important;border-radius:50%;border:3px solid #2a2d33!important;opacity:.35;box-shadow:none!important;animation:none}
@media (prefers-reduced-motion:no-preference){
  .ff-traffic i{animation:ff-light 4.5s steps(1) infinite!important}
  .ff-traffic span:nth-child(2) i{animation-delay:1.5s!important}
  .ff-traffic span:nth-child(3) i{animation-delay:3s!important}
}
@keyframes ff-light{0%,33.3%{opacity:1;box-shadow:0 0 18px currentColor,0 0 4px #fff inset}33.4%,100%{opacity:.35;box-shadow:none}}
.ff-traffic span:nth-child(1) i{color:#EF4444}.ff-traffic span:nth-child(2) i{color:#F59E0B}.ff-traffic span:nth-child(3) i{color:#22B573}
@media (prefers-reduced-motion:reduce){.ff-traffic span:nth-child(3) i{opacity:1}}
@media (max-width:600px){.ff-traffic i{width:36px!important;height:36px!important}.ff-traffic{gap:16px}}

/* ---------- Detail popup ---------- */
.ff-modal{max-width:min(980px,94vw);width:100%;padding:0;border:0;background:transparent;overflow:visible}
.ff-modal::backdrop{background:rgba(15,17,21,.55);backdrop-filter:blur(3px)}
.ff-modal-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(26px,4vw,48px);background:var(--paper);border:5px solid var(--ink);border-image:var(--pen) 9 / 9px / 0 stretch;background-clip:padding-box;box-shadow:12px 12px 0 var(--green)}
.ff-modal h2{font-size:clamp(32px,4vw,54px);margin:4px 0 16px;line-height:.95}
.ff-modal .ff-note{margin:0;font-size:22px;color:var(--green-deep)}
.ff-modal-body p{font-size:clamp(16px,1.35vw,19px);line-height:1.6;margin:0 0 16px}
.ff-modal-body ul{margin:0;padding-left:20px;font-size:15.5px}
.ff-modal-body li{margin:4px 0}
.ff-modal-pic{margin:0;background:#fff;padding:10px 10px 0;rotate:3deg;box-shadow:0 18px 30px -14px rgba(15,17,21,.5);position:relative}
.ff-modal-pic img{display:block;width:100%;height:auto}
.ff-modal-pic figcaption{position:absolute;left:8%;right:8%;bottom:3%;font-family:var(--hand);font-size:20px;text-align:center}
.ff-modal-x{position:absolute;top:-18px;right:-18px;z-index:2;width:52px;height:52px;border-radius:50%;border:3px solid var(--ink);background:var(--green);font-size:30px;line-height:1;cursor:pointer;rotate:8deg}
.ff-modal-x:hover{rotate:-8deg;scale:1.08}
@media (prefers-reduced-motion:no-preference){.ff-modal[open] .ff-modal-in{animation:ff-pop-in .45s cubic-bezier(.3,1.5,.5,1)}}
@keyframes ff-pop-in{from{opacity:0;scale:.85;rotate:-3deg}}
@media (max-width:760px){.ff-modal-in{grid-template-columns:1fr}.ff-modal-pic{max-width:240px;justify-self:center}.ff-modal-x{right:-6px}}
.ff-more summary{font-size:23px}
.ff-more summary::before{width:30px;height:30px;font-size:20px}


/* ---------- Flo: eyes layer, no rolls/loops anymore ---------- */
.ff-flo-eyes{transition:translate .35s cubic-bezier(.3,1.4,.5,1)}
@media (prefers-reduced-motion:no-preference){
  @keyframes ff-blink-eyes{0%,46%,50%,100%{scale:1 1}48%{scale:1 .1}}
  .ff-hero-art .ff-flo.ff-float,.ff-flo-cta,.ff-band-flo.ff-flo{animation:ff-fig8 7s ease-in-out infinite,ff-tilt 7s ease-in-out infinite}
  @keyframes ff-tilt{0%,100%{rotate:0deg}25%{rotate:8deg}50%{rotate:-2deg}75%{rotate:-8deg}}
}

/* ---------- Watch board: Flo guards the lights ---------- */
.ff-watch{position:relative;display:inline-block;margin-top:34px;padding:18px 24px 14px;background:var(--ink);border-radius:3px 1px 4px 2px/1px 4px 2px 3px;rotate:-1.2deg;box-shadow:7px 7px 0 var(--green)}
.ff-watch-lights{display:flex;gap:clamp(16px,2.4vw,30px)}
.ff-watch-light{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--hand);font-size:19px;color:#fff}
.ff-watch-light i{display:block;width:44px;height:44px;border-radius:50%;border:3px solid #2a2d33;background:#22B573;box-shadow:0 0 14px rgba(34,181,115,.65);transition:background .25s,box-shadow .25s}
.ff-watch-light.is-warn i{background:#F59E0B;box-shadow:0 0 16px rgba(245,158,11,.8);animation:ff-shake .35s 2}
.ff-watch-light.is-bad i{background:#EF4444;box-shadow:0 0 16px rgba(239,68,68,.8);animation:ff-shake .35s 2}
.ff-watch-light.is-fixed i{animation:ff-pop .5s cubic-bezier(.3,1.8,.5,1)}
@keyframes ff-shake{25%{translate:-3px 0}75%{translate:3px 0}}
.ff-watch-perch{position:absolute;right:-26px;top:-78px;width:78px}
.ff-watch-flo{width:78px}
.ff-watch-flo.is-glowing .ff-flo-glow{animation:ff-glow .3s ease-in-out infinite alternate!important;filter:brightness(1.4)}
.ff-watch-flo.is-glowing .ff-flo-light{opacity:1!important}
.ff-watch-note{margin:10px 0 0;font-family:var(--hand);font-size:17px;color:var(--green)}
@media (max-width:600px){.ff-watch-light i{width:34px;height:34px}.ff-watch{padding:14px 16px 10px}.ff-watch-perch{right:-10px;top:-64px;width:64px}.ff-watch-flo{width:64px}}
.ff-watch{margin-top:40px;margin-right:90px}
.ff-watch-perch{right:-86px;top:-26px}
@media (max-width:600px){.ff-watch{margin-right:64px}.ff-watch-perch{right:-66px;top:-20px}}

/* ---------- Findfly Studio teaser with hand-drawn animated sketch ---------- */
.ff-studio{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(20px,3vw,48px);align-items:center;margin-top:60px;padding:clamp(22px,3vw,40px);background:#fff;border:5px solid var(--ink);border-image:var(--pen) 9 / 9px / 0 stretch;background-clip:padding-box;rotate:-.5deg}
.ff-studio h3{font-size:clamp(36px,4vw,58px);margin:14px 0 10px}
.ff-studio p{font-size:16px}
.ff-studio .ff-note{font-size:22px;color:var(--green-deep)}
.ff-studio-art{width:100%;height:auto;overflow:visible}
@media (prefers-reduced-motion:no-preference){
  .ffs-play{transform-box:fill-box;transform-origin:center;animation:ffs-pulse 1.6s ease-in-out infinite}
  @keyframes ffs-pulse{50%{scale:1.15}}
  .ffs-strip{animation:ffs-scroll 3s linear infinite}
  @keyframes ffs-scroll{to{translate:-40px 0}}
  .ffs-cut{transform-box:fill-box;transform-origin:center;animation:ffs-snip 1.2s ease-in-out infinite}
  @keyframes ffs-snip{50%{rotate:-14deg}}
  .ffs-spark{transform-box:fill-box;transform-origin:center;animation:ff-twinkle 1.8s ease-in-out infinite}.ffs-spark.s2{animation-delay:.6s}
  .ffs-in{animation:ffs-feed 3.2s ease-in-out infinite}
  @keyframes ffs-feed{0%,100%{translate:0 0}50%{translate:10px -4px}}
  .ffs-out{transform-box:fill-box;transform-origin:center;animation:ffs-out 3.2s cubic-bezier(.3,1.5,.5,1) infinite}
  @keyframes ffs-out{0%,30%{scale:.9;rotate:4deg}45%,100%{scale:1;rotate:-3deg}}
  .ffs-note{animation:ffs-bob 1.4s ease-in-out infinite}
  @keyframes ffs-bob{50%{translate:0 -8px}}
  .ffs-reel{animation:ffs-pan 4s ease-in-out infinite alternate}
  @keyframes ffs-pan{to{translate:-18px 0}}
}
@media (max-width:860px){.ff-studio{grid-template-columns:1fr}}

.ff-watch-light{position:relative}
.ff-watch-tag{position:absolute;left:50%;top:-34px;translate:-50% 0;white-space:nowrap;background:#FFE873;color:var(--ink);font:400 16px var(--hand);padding:2px 8px;rotate:-5deg;box-shadow:0 4px 8px -4px rgba(0,0,0,.5);animation:ff-slap .4s cubic-bezier(.3,1.6,.5,1) both}

.ff-legal-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 6px}
.ff-legal-split>div{background:#fff;padding:12px 14px;border-left:4px solid var(--green)}
.ff-legal-split>div+div{border-left-color:var(--red)}
.ff-legal-split b{display:block;font-family:var(--display);font-weight:800;font-stretch:75%;font-size:20px;margin-bottom:4px}
.ff-legal-split ul{margin:0;padding-left:18px;font-size:13.5px}
.ff-watch-note small{display:block;color:#cfd6dd;font-size:14px}
@media (max-width:700px){.ff-legal-split{grid-template-columns:1fr}}
.ff-legal-split{grid-template-columns:1fr!important}
.ff-legal-split ul{columns:2;column-gap:18px}
@media (max-width:700px){.ff-legal-split ul{columns:1}}
.ff-hero-art .ff-flo{position:relative}
.ff-hero-art .ff-flo.is-glowing .ff-flo-glow{animation:ff-glow .3s ease-in-out infinite alternate!important;filter:brightness(1.4)}
.ff-hero-art .ff-flo.is-glowing .ff-flo-light{opacity:1!important}

.ff-star{transition:filter .3s}
.ff-star.is-bad{filter:hue-rotate(-150deg) saturate(1.6);animation:ff-shake .3s 3!important}
.ff-star.is-warn{filter:hue-rotate(-112deg) saturate(1.5);animation:ff-shake .3s 3!important}
.ff-star.is-fixed{animation:ff-pop .5s cubic-bezier(.3,1.8,.5,1)!important}

/* Pupils wander a little on their own, too */
@media (prefers-reduced-motion:no-preference){.ff-hero-art .ff-flo-eyes:not([style*=translate]),.ff-flo-cta .ff-flo-eyes,.ff-footer-flo .ff-flo-eyes,.ff-band-flo .ff-flo-eyes{animation:ff-pupils 6s ease-in-out infinite}}
@keyframes ff-pupils{0%,18%,100%{translate:0 0}25%,40%{translate:-1.6% .4%}50%,62%{translate:1.6% -.6%}70%,85%{translate:.4% 1%}}

/* Flos on the right side are mirrored so they look into the page, not out of it */
.ff-hero-art .ff-flo,.ff-flo-cta,.ff-band-flo.ff-flo,.ff-watch-flo{scale:-1 1}
.ff-legal h3{font-size:22px;margin:22px 0 6px}
.ff-legal table{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}.ff-legal th,.ff-legal td{border:1.5px solid var(--ink);padding:6px 8px;text-align:left;vertical-align:top}