/* Fountain on the Appixy template's dark pages: only what the template does not already provide,
   in the template's own colours (--color--body-bg-color, --color--secondary-bg, --color--primary-one/-two). */
.skip-link{position:absolute;left:-999px;top:0}
.skip-link:focus{left:12px;top:12px;z-index:9999;background:#fff;color:#000a0b;padding:8px 12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px}
.grad-text{background-image:linear-gradient(90deg,var(--color--primary-one) 20%,var(--color--primary-two) 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* the wordmark */
.fountain-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.fountain-brand .fountain-mark{width:34px;height:34px;max-width:none}
.fountain-brand span{font-family:var(--font-family--body-font);font-weight:500;font-size:26px;line-height:1;color:var(--white);white-space:nowrap}
.footer-brand.fountain-brand .fountain-mark{width:40px;height:40px}
.nav-dropdown-toggle.is-current .nav-dropdown-text{color:var(--color--primary-one)}

/* the hero photograph and its floating cards */
.fountain-hero-photo{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 40px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06)}
.hero-image-wrapper{position:relative}
.hero-float{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.3;color:var(--color--secondary);
  background:rgba(26,28,36,.82);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
  animation:hfloat 8s ease-in-out infinite}
.hero-float b{display:block;font-weight:500;color:var(--white)}.hero-float i{display:block;font-style:normal;font-size:13px;opacity:.75}
.hero-float.f-pay{left:-6%;top:10%}.hero-float.f-pq{right:-4%;bottom:-6%;animation-delay:-4s}
.hf-dot{width:10px;height:10px;border-radius:50%;background:var(--color--primary-one);box-shadow:0 0 0 5px rgba(86,231,165,.18);flex:none}
.hf-eye{width:28px;height:28px;flex:none;--pq-ink:#e3eeec}
@keyframes hfloat{50%{transform:translateY(-8px)}}
@media screen and (max-width:767px){.hero-float{font-size:13px;padding:9px 12px}.hero-float.f-pay{left:2%;top:-6%}.hero-float.f-pq{right:2%;bottom:-8%}}
@media (prefers-reduced-motion:reduce){.hero-float{animation:none}}

/* links and pills */
.cta-text-link{display:inline-flex;align-items:center;gap:8px;color:var(--color--secondary);font-size:18px;text-decoration:none;border-bottom:1px solid rgba(227,238,236,.3);padding-bottom:2px}
.cta-text-link:hover{color:var(--color--primary-one);border-color:var(--color--primary-one)}
.ask-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.ask-pills.center{justify-content:center}
.ask-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid rgba(255,255,255,.16);border-radius:60px;color:var(--color--secondary);font-size:16px;text-decoration:none;background:rgba(255,255,255,.03)}
a.ask-pill:hover,.ask-pill.is-on{border-color:transparent;color:#000a0b;background-image:linear-gradient(90deg,var(--color--primary-one),var(--color--primary-two))}
.ask-pill .n{opacity:.6;font-size:.85em}
.ask-note{margin-top:20px;color:var(--color--secondary);opacity:.75;font-size:16px}

/* PelQi */
.pelqi-hero-stage{display:grid;place-items:center;gap:18px;padding:30px 0}
.pelqi-hero-stage .giant-eye{width:min(340px,80%);height:auto}
.pelqi-hero-stage.small .giant-eye{width:150px}
.giant-eye{--pq-ink:#e3eeec;filter:drop-shadow(0 0 50px rgba(86,231,165,.25))}
.giant-eye .pq-ring{stroke:#e3eeec}
.giant-eye .pq-iris{fill:#121418;stroke:rgba(227,238,236,.35)}
.pb-mood{margin:0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--color--secondary);opacity:.7;text-align:center}
.moods-block{display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center}
@media screen and (max-width:991px){.moods-block{grid-template-columns:1fr;gap:30px}}
.pelqi-mood-eye{display:grid;place-items:center;padding:20px}
.pelqi-mood-eye .giant-eye{width:min(300px,75%);height:auto}
.mood-intro{margin-bottom:26px}
.mood-pills{display:flex;flex-wrap:wrap;gap:10px}
.mood-pill{padding:9px 18px;border:1px solid rgba(255,255,255,.18);border-radius:60px;background:transparent;color:var(--color--secondary);font:inherit;font-size:16px;cursor:pointer;transition:all .25s}
.mood-pill:hover{border-color:var(--color--primary-one)}
.mood-pill[aria-pressed=true]{border-color:transparent;color:#000a0b;background-image:linear-gradient(90deg,var(--color--primary-one),var(--color--primary-two))}
.mood-say{margin-top:20px;min-height:1.6em;color:var(--color--secondary);opacity:.85}

/* industry pages */
.notice-band{padding-top:30px}
.notice-text{border:1px solid rgba(255,213,13,.45);border-radius:16px;padding:18px 22px;color:var(--color--secondary);background:rgba(255,213,13,.05)}
.workspace-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:start}
@media screen and (max-width:991px){.workspace-grid{grid-template-columns:1fr}}
.quote-panel{padding:36px;border-radius:30px;background:var(--color--secondary-bg);border:1px solid rgba(255,255,255,.06)}
.quote-panel-title{font-size:26px;color:var(--white);margin-bottom:18px}
.qp-line{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.1);color:var(--white)}
.qp-line.sub{color:var(--color--secondary);opacity:.85}
.qp-note{margin-top:14px;font-size:15px;color:var(--color--secondary);opacity:.7}
.service-list{list-style:none;margin:0;padding:0}
.service-list li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.service-list b{color:var(--white);font-weight:500}
.service-list span{grid-column:1;font-size:16px;color:var(--color--secondary);opacity:.8}
.service-list em{grid-column:2;grid-row:1;font-style:normal;font-size:15px;color:var(--color--primary-one)}

/* industries */
.team-name-link{color:inherit;text-decoration:none}
.team-name-link:hover{color:var(--color--primary-one)}
.team-image{object-fit:cover;aspect-ratio:329/462;width:100%}
.compare-wrap{overflow-x:auto;border:1px solid rgba(255,255,255,.1);border-radius:20px}
.compare-table{width:100%;border-collapse:collapse;font-size:16px;min-width:820px;color:var(--color--secondary)}
.compare-table th,.compare-table td{text-align:left;vertical-align:top;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.compare-table th{font-weight:500;color:var(--white);background:var(--color--secondary-bg)}
.compare-table tr:last-child td{border-bottom:0}
.compare-table a{color:var(--white);font-size:19px;text-decoration:none}
.compare-table a:hover{color:var(--color--primary-one)}
.demo-note{display:block;font-size:13px;opacity:.7;margin-top:4px}

/* setup help */
.contact-form select.input-field{appearance:auto}
.form-thanks{padding:40px;text-align:center}
.form-error{grid-column:1/-1;border:1px solid #e5675f;color:#ffc9c4;border-radius:12px;padding:12px 16px}

/* the directory */
.dir-search{display:grid;grid-template-columns:2fr 1.2fr 1fr auto;gap:12px;max-width:1000px;margin:34px auto 22px;text-align:left}
.dir-search .input-field{margin:0}
@media screen and (max-width:767px){.dir-search{grid-template-columns:1fr}}
.dir-ph{display:grid;place-items:center;aspect-ratio:16/10;font-size:44px;border-radius:20px}
.dir-head{margin:8px 0 0;color:var(--color--secondary);opacity:.8;font-size:16px}
.dir-empty{grid-column:1/-1;padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:20px;color:var(--color--secondary)}
.more-btn{margin-top:40px}

/* error pages */
.oops-hero .breadcrumb-content-wrapper{text-align:center}
.oops-actions{gap:28px;flex-wrap:wrap;margin-top:34px}

/* seven menu items where the template has five: keep each on one line */
.nav-link-text,.nav-dropdown-text,.nav-menu-link-text{white-space:nowrap}
.nav-link-block[aria-current=page]{color:var(--color--primary-one)}
.navbar-wrapper .fountain-brand{margin-right:28px}
@media screen and (min-width:992px){.nav-menu-list-wrapper{grid-column-gap:30px;grid-row-gap:30px}}
@media screen and (min-width:992px) and (max-width:1279px){.nav-menu-list-wrapper{grid-column-gap:20px}.nav-link-block,.nav-dropdown-text{font-size:16px}.nav-menu-link-block{font-size:17px}}
.hero-float.f-pq{bottom:6%}

/* the industry choice on the request form, legible on the template's dark field */
.contact-form select.input-field{color:var(--color--secondary);background-color:var(--color--secondary-bg);padding-top:0;padding-bottom:0;height:80px}
.contact-form select.input-field option{color:#000a0b;background:#fff}

/* the hero laptop stands free on the dark page, cut out of its photo (as in the Assurix template) */
.fountain-hero-cut{border-radius:0;box-shadow:none;filter:drop-shadow(0 50px 60px rgba(0,0,0,.7));max-width:none;width:146%;margin-left:-40%;margin-top:40px}
.hero-image-wrapper .hero-float.f-pay{left:-26%;top:2%}.hero-image-wrapper .hero-float.f-pq{right:-2%;bottom:6%}
@media screen and (max-width:991px){.fountain-hero-cut{width:108%;margin-left:-4%;margin-top:0}.hero-image-wrapper .hero-float.f-pay{left:0}.hero-image-wrapper .hero-float.f-pq{right:0}}

/* ---------------------------------------------------------------- a clean pass: words and pictures sit on the page
   No template line grid, no grey panels round photographs, and real people and video alongside the phones. */
.hero-bg-shape-wrapper,.section-bg-shape-wrapper,.footer-bg-shape-wrapper,.breadcrumb-bg-shape-wrapper{display:none}
/* the hero's glow sits where the template puts it and fades on into the next section instead of stopping in a
   line at the hero's edge; only the sides are clipped */
.home-hero-section{overflow:visible;overflow-x:clip}
/* every section keeps its glow inside its own sides, so a full-size glow never makes the page scroll sideways */
.fountain-site section,.fountain-site footer{overflow-x:clip}

/* the industries under the hero: plain words sliding slowly past, no boxes or dots; they stop under the pointer
   and stand still, wrapped and centred, when reduced motion is asked for */
.company-logo-section.industry-row{background:none;padding:34px 0 10px}
.industry-marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.im-track{display:flex;flex:none;align-items:center;justify-content:space-around;min-width:100%;animation:im-slide 70s linear infinite}
.industry-marquee:hover .im-track,.industry-marquee:focus-within .im-track{animation-play-state:paused}
.im-track a{display:inline-flex;align-items:center;padding:0 34px;white-space:nowrap;color:var(--color--secondary);font-size:19px;text-decoration:none;opacity:.8;transition:color .25s,opacity .25s}
.im-track a:hover{color:var(--color--primary-one);opacity:1}
.im-track em{font-style:normal;font-size:.72em;letter-spacing:.04em;padding:2px 8px;margin-left:8px;border-radius:20px;color:var(--color--primary-two);background:rgba(255,213,13,.08)}
@keyframes im-slide{to{transform:translateX(-100%)}}
@media screen and (max-width:767px){.im-track{animation-duration:50s}.im-track a{font-size:17px;padding:0 22px}}
@media (prefers-reduced-motion:reduce){.industry-marquee{-webkit-mask-image:none;mask-image:none;justify-content:center}.im-track{animation:none;flex-wrap:wrap;justify-content:center;gap:12px 0;min-width:0;flex:1}.im-track[aria-hidden]{display:none}}

/* the people slideshow in the about section */
.fountain-site .home-about-image-wrapper{display:block;background:none;padding:0;max-height:none;border-radius:24px;overflow:hidden}
.people-reel{position:relative;aspect-ratio:16/8;border-radius:24px;overflow:hidden;background:#000a0b}
.pr-slide{position:absolute;inset:0;margin:0;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.pr-slide.on{opacity:1;visibility:visible;transition:opacity .8s ease}
.pr-slide img{width:100%;height:100%;object-fit:cover;display:block}
.pr-slide.on img{animation:pr-zoom 3s ease-out forwards}
@keyframes pr-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.pr-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,10,11,.78) 0%,rgba(0,10,11,.35) 45%,rgba(0,10,11,0) 75%),linear-gradient(0deg,rgba(0,10,11,.55),rgba(0,10,11,0) 40%)}
.pr-slide figcaption{position:absolute;z-index:1;left:clamp(20px,5vw,56px);bottom:clamp(54px,7vw,84px);max-width:520px;text-align:left}
.pr-eyebrow{display:block;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--color--primary-one);margin-bottom:10px}
.pr-slide figcaption b{display:block;font-weight:500;color:var(--white);font-size:clamp(24px,3vw,40px);line-height:1.1}
.pr-dots{position:absolute;z-index:2;left:clamp(20px,5vw,56px);bottom:clamp(22px,3vw,34px);display:flex;gap:8px}
.pr-dots button{width:30px;height:4px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .3s,background .3s}
.pr-dots button[aria-current=true]{width:48px;background-image:linear-gradient(90deg,var(--color--primary-one),var(--color--primary-two))}
@media screen and (max-width:767px){.people-reel{aspect-ratio:4/5}.pr-slide::after{background:linear-gradient(0deg,rgba(0,10,11,.85),rgba(0,10,11,0) 65%)}}
@media (prefers-reduced-motion:reduce){.pr-slide,.pr-slide.on{transition:none}.pr-slide.on img{animation:none}}

/* the closing band: the words over a real photograph or video, dimmed, fading into the page above and below */
.cta-section.has-bg{background:#000a0b;padding-top:150px;padding-bottom:150px}
.cta-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.cta-bg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.cta-bg-media.on{opacity:.6}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,10,11,.94) 0%,rgba(0,10,11,.72) 42%,rgba(0,10,11,.2) 100%),linear-gradient(0deg,#000a0b 0%,rgba(0,10,11,0) 26%),linear-gradient(180deg,#000a0b 0%,rgba(0,10,11,0) 26%)}
.cta-section.has-bg .w-container{position:relative;z-index:1}
.cta-section.has-bg .cta-block{display:block}
.cta-section.has-bg .cta-content-block{max-width:620px}
@media screen and (max-width:767px){.cta-section.has-bg{padding-top:110px;padding-bottom:110px}.cta-bg::after{background:linear-gradient(0deg,rgba(0,10,11,.9) 0%,rgba(0,10,11,.42) 100%),linear-gradient(180deg,#000a0b 0%,rgba(0,10,11,0) 25%)}.cta-bg-media.on{opacity:.75}}
@media (prefers-reduced-motion:reduce){.cta-bg-media{transition:none}}

/* inner page heroes: a wide photograph or video with one phone standing in front of its corner */
.fountain-site .features-hero-image-wrapper{max-height:none;overflow:visible;padding-top:40px;padding-bottom:70px}
.hero-media{position:relative;width:min(100%,1080px);margin:0 auto}
.hero-media-main{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:24px;box-shadow:0 40px 120px -40px rgba(0,0,0,.9)}
.hero-media-phone{position:absolute;right:4%;bottom:-8%;width:clamp(120px,19%,220px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
@media screen and (max-width:767px){.hero-media-main{aspect-ratio:4/3}.hero-media-phone{width:32%;right:3%;bottom:-10%}}

/* step rows with a photograph: the photograph fills its panel */
.financial-management-image-block.is-photo{padding:0;background:none;min-height:420px}
.financial-management-image-block.is-photo .financial-management-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:20px}
.financial-management-image-block.is-photo .financial-management-gradient-shape,.financial-management-image-block.is-photo [class*=shape]{display:none}

/* industry pages: the example business on a real device, no grey band */
.example-band{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
.example-band .feature-text{margin:14px 0}
.example-photo{display:block;width:100%;max-width:380px;height:auto;justify-self:center;border-radius:24px;box-shadow:0 40px 100px -40px rgba(0,0,0,.9)}
.example-photo.wide{max-width:none;aspect-ratio:4/3;object-fit:cover}
@media screen and (max-width:767px){.example-band{grid-template-columns:1fr;gap:28px}}

/* industries: each photograph fills its card */
.fountain-site .team-image-block{padding:0;background:none}
.fountain-site .team-image{border-radius:20px}

/* setup help: real people in the template's fan, Fountain on the phone in the middle */
.cta-contact-image.is-photo{width:min(327px,24vw);height:auto;max-width:none;aspect-ratio:327/700;object-fit:cover;border-radius:36px}

/* the directory and home cards: pictures the same shape, so the cards line up */
.fountain-site .blog-thumbnail{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;height:auto}

/* the menu sits on the page itself, not in a grey bar */
.fountain-site .navbar-inner-container{background:none;box-shadow:none;border:0;padding-left:0;padding-right:0}

/* the directory: the template keeps room under its hero for a picture we do not use; close it up */
.breadcrumb-section.dir-hero{padding-bottom:40px}
.breadcrumb-section.dir-hero .breadcrumb-gradient-shape{top:180px;bottom:auto}
.blog-section.dir-list{padding-top:40px}
.dir-list .blog-item{opacity:1!important;transform:none!important}

/* spacing QA: the template leaves 140px above and below every section, which doubles up between them */
@media screen and (min-width:992px){
  .fountain-site .section-gap{padding-top:96px;padding-bottom:96px}
  .fountain-site .section-gap-bottom{padding-bottom:96px}
  .fountain-site .contact-cta-section{padding-bottom:100px}
}
/* heroes: enough room under the home hero for its glow to fade, less under the others */
.fountain-site .home-hero-section{padding-bottom:70px}
.fountain-site .home-hero-section:has(.fountain-hero-cut){padding-bottom:110px}
/* the pinned app screens: two screens of scrolling instead of three */
.fountain-site .interface-section{height:200vh}

/* step rows sit on the page: no grey band behind the section and no dark box waiting for its phone to slide in */
.fountain-site .financial-management-section{background:none}
.fountain-site .financial-management-image-block{background:none}

/* How it works: the tools card says plainly what works today; the payment card from the template sits on the phone */
.tools-note{max-width:440px;margin:4px auto 34px;padding:0 24px;text-align:center;font-size:15px;line-height:1.55;color:var(--color--secondary);opacity:.8}
.saasnap-logo-wrap{width:50px;height:50px;display:flex;align-items:center;justify-content:center}.saasnap-logo{width:46px;height:46px;max-width:none}
.feature-tools-shape-image-block .tools-pop{left:0;right:0;bottom:36px;margin:0 auto;width:max-content;max-width:92%}

/* Pricing: two plans in the comparison, a plain note under the cards */
.pricing-compare-section.two-plans .pricing-grid-row,.pricing-compare-section.two-plans .pricing-compare-heading-grid{grid-template-columns:2fr 1fr 1fr}
.pricing-note{margin:30px auto 0;max-width:760px;text-align:center;font-size:16px;color:var(--color--secondary);opacity:.75}
@media screen and (max-width:767px){
  .pricing-compare-section.two-plans .pricing-grid-row,.pricing-compare-section.two-plans .pricing-compare-heading-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;padding-left:12px;padding-right:12px;min-width:0}
  .pricing-compare-section.two-plans .pricing-column,.pricing-compare-section.two-plans .pricing-compare-info-block,.pricing-compare-section.two-plans .pricing-compare-title-block{width:auto;min-width:0;flex:none}
  .pricing-compare-section.two-plans .pricing-info-column{min-width:0;padding-right:10px}
  .pricing-compare-section.two-plans .pricing-compare-table,.pricing-compare-section.two-plans .pricing-compare-table-wrapper,.pricing-compare-section.two-plans .pricing-analysis-compare{min-width:0;width:100%}
  .pricing-compare-section.two-plans .pricing-compare-info-block .primary-button{display:none}
  .pricing-compare-section.two-plans .pricing-info-text{font-size:15px}
  .pricing-compare-section.two-plans .pricing-compare-except{display:none}
}
/* Websites: the template's landing page, on our dark page. Its light sections take the page colour and its
   headings turn light; the pastel cards keep their own colours and dark words. */
.websites-page .landing-page-subtitle-icon{width:18px;height:18px;max-width:none}
.websites-page .landing-page-core-features-section,.websites-page .landing-page-template-showcase-section,.websites-page .landing-page-featured-section-marquee-section,
.websites-page .landing-page-template-features-section{background:none}
.websites-page .landing-page-section-heading,.websites-page .landing-page-core-features-heading,.websites-page .landing-page-template-showcase-page-name,
.websites-page .landing-page-template-feature-text{color:var(--white)}
.websites-page .landing-page-section-except,.websites-page .landing-page-core-features-text{color:var(--color--secondary)}
.websites-page .landing-page-core-feature-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:none;backdrop-filter:none}
.websites-page .landing-page-template-showcase-page-wrapper,.websites-page .landing-page-featured-section-item{background:#1a1c24;box-shadow:none}
.websites-page .landing-page-template-showcase-tab-menu{background:#1a1c24}
.websites-page .landing-page-template-showcase-tab-link{color:var(--color--secondary)}
.websites-page .landing-page-template-showcase-tab-link.w--current{color:#000a0b;background-image:linear-gradient(90deg,var(--color--primary-one),var(--color--primary-two))}
.websites-page .landing-page-badge{background:#2d3a3f}
.websites-page .landing-page-badge.new{background:#0fb828}
.websites-page .landing-page-feature-variation-heading{color:#0d121c}
.websites-page video.landing-page-promotional-video-image{display:block;width:100%;height:auto;aspect-ratio:1170/620;object-fit:cover}
/* Websites: no template grid squares behind the hero, the video or the built-for-you section, and the mark
   stands on its own with no circle behind it */
.websites-page .landing-page-hero-bg-image,.websites-page .landing-page-promotional-video-bg{background-image:none}
.websites-page .landing-page-hero-overlay{background-image:linear-gradient(0deg,rgba(0,10,11,0),#000a0b)}
.websites-page .landing-request-figma-file-lower-block{background-color:#000a0b;background-image:none}
.websites-page .landing-page-figma-icon-wrapper{background:none;width:auto;height:auto;box-shadow:none}
.websites-page .landing-page-figma-icon{width:72px;height:72px;max-width:none}
.websites-page .landing-page-request-figma-shape-one,.websites-page .landing-page-request-figma-shape-two{display:none}
/* the hero phone is built at three times the template's size for a sharp screen; shown at the template's size */
.websites-page .landing-page-hero-image-element{height:auto;max-width:479px}
/* Websites: the landing sections on one dark page need less air than on the template's alternating bands */
@media screen and (min-width:992px){.websites-page .landing-page-padding-top-120px{padding-top:90px}.websites-page .landing-page-padding-bottom-120px{padding-bottom:90px}}

/* every kind of business: the areas grid, the area page and the two-column menu */
.nav-dropdown-wrapper.areas{display:grid;grid-template-columns:repeat(2,minmax(200px,1fr));column-gap:4px}
.nav-dropdown-wrapper.areas > a:last-child{grid-column:1/-1}
@media (max-width:991px){.nav-dropdown-wrapper.areas{grid-template-columns:1fr}}
.area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:28px}
.area-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:20px;text-decoration:none;color:#e9f0ee;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);transition:border-color .25s,transform .25s}
.area-card:hover{border-color:rgba(86,231,165,.45);transform:translateY(-2px)}
.area-card b{font-size:1.15rem;color:#fff}
.area-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#0b1517;border:1px solid rgba(86,231,165,.35);color:#56e7a5}
.area-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.area-sum{color:#a8b8b4;font-size:.95rem;line-height:1.5}
.area-types{color:#d7e3e0;font-size:.85rem;line-height:1.55;margin-top:auto;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}
.area-card.is-demo{opacity:.82}
.area-badge{align-self:flex-start;font-size:.75rem;padding:3px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2);color:#cfd8d6}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:24px}
.type-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09)}
.type-card h3{margin:0;font-size:1.1rem;color:#fff}
.type-card ul{margin:0;padding:0;list-style:none;color:#a8b8b4;font-size:.9rem;line-height:1.7}
.type-card .type-start{margin-top:auto;padding-top:8px;color:#56e7a5;font-weight:600;text-decoration:none}
.type-card .type-start:hover{text-decoration:underline;text-underline-offset:3px}
.area-others{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.area-others a{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:#d7e3e0;text-decoration:none;font-size:.9rem}
.area-others a:hover{border-color:rgba(86,231,165,.5);color:#fff}
.fun-fact-number-wrapper{min-width:2.2ch}

.area-demo-line{margin:26px 0 0;color:#a8b8b4}.area-demo-line a{color:#56e7a5;text-decoration:none;font-weight:600}.area-demo-line a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- the template's glows, without filters.
   The template paints its green and yellow light with blur() on small shapes, and iPhone Safari draws those inside
   hard rectangles while anything animates. Each glow was rendered once in Chrome from the template's own CSS
   (gradient, opacity, blur and shape) by ff/site/render_glows.py, and is painted here as that image on a layer grown
   by the blur's reach, so colour and spread match the template exactly with no filter. */
.home-hero-gradient-shape,.breadcrumb-gradient-shape,.features-hero-gradient-shape,.core-values-gradient-shape,.feature-gradient-shape,.pricing-shape,.contact-form-shape,.contact-cta-shape,.financial-management-blurry-shape,.landing-page-blurry-block-two,.landing-page-promotional-video-shape-one,.landing-page-blurry-block-one,.landing-page-promotional-video-shape-two{filter:none!important;background:none!important;opacity:1!important;overflow:visible!important}
.home-hero-gradient-shape::before,.breadcrumb-gradient-shape::before,.features-hero-gradient-shape::before,.core-values-gradient-shape::before,.feature-gradient-shape::before,.pricing-shape::before,.contact-form-shape::before,.contact-cta-shape::before,.financial-management-blurry-shape::before,.landing-page-blurry-block-two::before,.landing-page-promotional-video-shape-one::before,.landing-page-blurry-block-one::before,.landing-page-promotional-video-shape-two::before{content:"";position:absolute;pointer-events:none;background:center/100% 100% no-repeat}
.home-hero-gradient-shape::before{inset:-150.00% -150.00%;background-image:url("../images/glow-home-hero.bc32bed4b96e.webp")}
.breadcrumb-gradient-shape::before{inset:-126.32% -56.80%;background-image:url("../images/glow-breadcrumb.400442dc6e62.webp")}
.features-hero-gradient-shape::before{inset:-140.91% -148.09%;background-image:url("../images/glow-features-hero.0f3ff819378a.webp")}
.core-values-gradient-shape::before{inset:-65.62% -65.62%;background-image:url("../images/glow-core-values.41401bcfb584.webp")}
.feature-gradient-shape::before{inset:-62.79% -47.37%;background-image:url("../images/glow-feature.61e724a47071.webp")}
.pricing-shape::before{inset:-65.62% -65.62%;background-image:url("../images/glow-pricing.7e6ddf4a616f.webp")}
.contact-form-shape::before{inset:-76.36% -46.67%;background-image:url("../images/glow-contact-form.db9613a0c60a.webp")}
.contact-cta-shape::before{inset:-200.00% -50.00%;background-image:url("../images/glow-contact-cta.abfd76ff44a3.webp")}
.financial-management-blurry-shape::before{inset:-109.50% -36.50%;background-image:url("../images/glow-financial.ae830ed97a13.webp")}
.landing-page-blurry-block-two::before{inset:-163.64% -163.64%;background-image:url("../images/glow-blurry-yellow.c90c14cf4ce4.webp")}
.landing-page-promotional-video-shape-one::before{inset:-163.64% -163.64%;background-image:url("../images/glow-blurry-yellow.c90c14cf4ce4.webp")}
.landing-page-blurry-block-one::before{inset:-153.06% -153.06%;background-image:url("../images/glow-blurry-green.361f8f53b625.webp")}
.landing-page-promotional-video-shape-two::before{inset:-153.06% -153.06%;background-image:url("../images/glow-blurry-green.361f8f53b625.webp")}
.landing-page-core-features-shape-one,.landing-page-core-features-shape-two,.landing-page-core-features-shape-three,
.landing-page-core-features-shape-four,.landing-page-core-features-shape-five{filter:none!important;display:none!important}
.landing-page-request-figma-shape-one,.landing-page-request-figma-shape-two,.landing-page-request-figma-shape-three,
.landing-page-request-figma-shape-four,.landing-page-template-feature-variation-shape{filter:none!important;display:none!important}
.landing-page-core-feature-card{filter:none!important}
/* the PelQi eye: a soft halo painted behind it instead of a drop-shadow */
.giant-eye{filter:none!important;overflow:visible;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,149,107,.18),rgba(86,231,165,.12) 62%,rgba(86,231,165,0) 100%)}
/* photographs sit clean: no shadow filters on the hero laptop or phone */
.fountain-hero-cut,.hero-media-phone{filter:none!important}

/* images keep their own shape: the scrolling site tiles fill by cropping, the tool cards fit inside their box */
.landing-page-cta-image{object-fit:cover;object-position:center top}
/* the payment cards on How it works sit at the template card's own size (the images are drawn at 2x) */
.credit-card-image-one,.credit-card-image-two{width:285px;max-width:45%;height:auto}
/* the phones beside the app screens fade into each other in place (site.js) instead of sliding apart */
.interface-mockup-image{transform:none!important;transition:opacity .35s ease}
/* a link that follows a separator (Home / Industries / area) gets the same space as the current page */
.breadcrumb-link-separator+.breadcrumb-link{padding-left:5px}
/* ---------- the home page's proof and the pricing comparison: the template's panels (#1a1c24) on the page */
.proof-section .section-title-wrapper,.stack-section .section-title-wrapper{text-align:center;margin:0 auto 40px}
.proof-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.proof-item{background:#1a1c24;border-radius:20px;padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.proof-item b{font-family:var(--font-family--heading-font,Kanit,sans-serif);font-weight:500;font-size:40px;line-height:1.1;
  background:linear-gradient(90deg,#ffd50d,#56e7a5);-webkit-background-clip:text;background-clip:text;color:transparent}
.proof-item span{color:#e3eeec;opacity:.85;font-size:17px;line-height:1.5}
.proof-words{margin-top:48px}
.proof-words-title{text-align:center;font-weight:500;margin:0 0 24px}
.proof-words{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.proof-words-title{grid-column:1/-1}
.proof-quote{margin:0;background:#1a1c24;border-radius:20px;padding:26px}
.proof-quote blockquote{margin:0 0 16px;border:0;padding:0;font-size:18px;line-height:1.55;color:#e3eeec}
.proof-quote figcaption{display:flex;flex-direction:column;gap:2px;font-size:15px}
.proof-quote figcaption span{opacity:.7}
.stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
@media screen and (max-width:767px){.stack-grid{grid-template-columns:1fr}}
.stack-card{background:#1a1c24;border-radius:20px;padding:30px 28px;display:flex;flex-direction:column}
.stack-card h3{margin:0 0 18px;font-weight:500;font-size:24px}
.stack-card.is-fountain{box-shadow:inset 0 0 0 1px rgba(86,231,165,.45)}
.stack-list{list-style:none;margin:0 0 auto;padding:0}
.stack-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);font-size:17px}
.stack-list li:first-child{border-top:0}
.stack-list li span{opacity:.85}
.stack-list li b{font-weight:500;white-space:nowrap}
.stack-card.is-fountain .stack-list li b{color:#56e7a5}
.stack-total{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.stack-total b{font-size:28px;font-weight:500}
.stack-card.is-fountain .stack-total:not(.minor) b{background:linear-gradient(90deg,#ffd50d,#56e7a5);-webkit-background-clip:text;background-clip:text;color:transparent}
.stack-total.minor{margin-top:6px;padding-top:6px;border-top:0}
.stack-total.minor b{font-size:20px}
.stack-note{text-align:center;max-width:720px;margin:28px auto 0;font-size:15px;opacity:.7}
/* phones: videos with a loop wait unseen until site.js swaps in the loop, so no play button ever shows */
@media screen and (max-width:767px){video[data-loop]{visibility:hidden}}
/* one Start free: the template's yellow button at the top right; on phones a compact yellow pill beside the menu */
.nav-button-wrapper .primary-button-block{margin:0}
.nav-cta-phone{display:none}
@media screen and (max-width:991px){
  .nav-button-wrapper{display:none}
  .nav-cta-phone{display:inline-flex;align-items:center;gap:6px;margin-left:auto;margin-right:12px;padding:10px 16px;border-radius:999px;
    background:#ffd50d;color:#000a0b;font-weight:600;font-size:15px;line-height:1;text-decoration:none;white-space:nowrap}
  .nav-cta-phone:hover{background:#56e7a5;color:#000a0b}
}
@media screen and (max-width:479px){
  .navbar-wrapper .fountain-brand{margin-right:8px;gap:8px}
  .navbar-wrapper .fountain-brand span{font-size:19px}
  .navbar-wrapper .fountain-brand .fountain-mark{width:28px;height:28px}
  .nav-cta-phone{padding:9px 13px;font-size:14px;margin-right:10px}
}
@media screen and (max-width:359px){
  .navbar-wrapper .fountain-brand span{font-size:16px}
  .navbar-wrapper .fountain-brand .fountain-mark{width:24px;height:24px}
  .nav-cta-phone{padding:8px 11px;font-size:13px;margin-right:6px}
  .nav-cta-phone svg{display:none}
}
/* phone pictures are drawn at twice their size so they stay sharp on Retina and iPhone screens; they show no larger than before */
img[src*="site/images/phone-"],img[src*="site/images/interface-phone-"]{max-width:min(486px,100%);height:auto}
img[src*="site/images/web-card-"]{max-width:min(480px,100%);height:auto}
img[src*="site/images/web-side-"]{max-width:min(374px,100%);height:auto}
/* Pricing: the Growth trial note under the price */
.pricing-trial-note{margin:-4px 0 14px;color:#56e7a5;font-size:15px;font-weight:500}
/* the PelQi phone's glow fades out on its own: the template clips it inside a dark card, and without the card the clip
   showed as a rounded box; the phone fades in where it stands instead of rising out of that card */
.fountain-site .financial-management-image-block{overflow:visible}
.fountain-site .financial-management-section{overflow:visible;overflow-x:clip;display:flow-root}
.fountain-site .financial-management-image-block>img{transform:none!important}
/* ---------- Pricing: the 0% line, monthly or yearly, the plan picker and the pipeline demo; the home page's
   "see it for your business" panel. Template colours only: its card colour, its green and yellow, its body colour. */
.pricing-top{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;margin:0 0 34px}
.zero-pill{display:inline-flex;align-items:center;gap:10px;margin:0;padding:10px 18px;border-radius:999px;background:var(--color--secondary-bg);border:1px solid rgba(86,231,165,.35);color:var(--color--secondary);font-size:15px;line-height:1.35}
.zero-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--color--primary-one)}
.bill-toggle{display:inline-flex;padding:4px;border-radius:999px;background:var(--color--secondary-bg);border:1px solid rgba(255,255,255,.08)}
.bill-toggle button{border:0;background:none;color:var(--color--secondary);font:500 15px var(--font-family--body-font);padding:9px 18px;border-radius:999px;cursor:pointer}
.bill-toggle button span{color:var(--color--primary-one);font-size:13px;margin-left:4px}
.bill-toggle button[aria-pressed=true]{background:var(--color--primary-two);color:var(--color--body-bg-color)}
.bill-toggle button[aria-pressed=true] span{color:var(--color--body-bg-color)}
.pricing-yearly-note{margin:-6px 0 6px;color:#a8b8b4;font-size:14px}
.plan-tools{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:start}
.plan-picker,.pipeline-demo{background:var(--color--secondary-bg);border-radius:20px;padding:30px;border:1px solid rgba(255,255,255,.06);min-width:0}
.plan-tools-title{color:var(--white);font-size:24px;line-height:1.25;margin:0 0 8px}
.plan-tools-text{color:#a8b8b4;margin:0 0 20px;font-size:15px}
.pick-q{border:0;margin:0 0 14px;padding:0;min-width:0}
.pick-q legend{color:var(--color--secondary);font-weight:500;margin-bottom:8px;font-size:15px;padding:0}
.pick-q label{display:inline-flex;align-items:center;gap:8px;margin:0 8px 8px 0;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);color:var(--color--secondary);cursor:pointer;font-size:14px;font-weight:400}
.pick-q input{accent-color:#56e7a5;margin:0}
.pick-q label:has(input:checked){border-color:var(--color--primary-one);color:var(--white)}
.pick-result{margin-top:6px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.pick-plan{color:var(--white);font-size:22px;font-weight:500;margin:0 0 4px}
.pick-why{color:#a8b8b4;font-size:15px;margin:0 0 16px}
.demo-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.demo-col{background:rgba(255,255,255,.03);border-radius:14px;padding:10px;min-height:190px;border:1px dashed transparent;transition:border-color .2s}
.demo-col.over{border-color:var(--color--primary-one)}
.demo-head{color:#a8b8b4;font-size:13px;margin:2px 4px 10px;text-transform:uppercase;letter-spacing:.06em}
.demo-card{background:var(--color--body-bg-color);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;color:var(--color--secondary);font-size:14px;display:flex;flex-direction:column;gap:2px;border:1px solid rgba(255,255,255,.08)}
.demo-card b{color:var(--white);font-weight:500}
.demo-card span{font-size:12.5px;color:#a8b8b4}
.demo-card:focus-visible{outline:2px solid var(--color--primary-two);outline-offset:2px}
.demo-card.dragging{cursor:grabbing;position:relative;z-index:3;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.demo-col[data-col=Won] .demo-card{border-color:rgba(86,231,165,.45)}
.demo-note{color:#a8b8b4;font-size:13.5px;margin:12px 0 0}
.try-intro{color:#a8b8b4;max-width:640px;margin:14px auto 0;text-align:center}
.try-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:start}
.try-pick{background:var(--color--secondary-bg);border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,.06);min-width:0}
.try-label{display:block;color:var(--white);font-size:20px;font-weight:500;margin-bottom:12px}
.try-input{width:100%;padding:14px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:var(--color--body-bg-color);color:var(--white);font:16px var(--font-family--body-font)}
.try-input:focus{outline:none;border-color:var(--color--primary-one)}
.try-list{list-style:none;margin:8px 0 0;padding:0;max-height:240px;overflow:auto}
.try-list:empty{display:none}
.try-list li{padding:10px 14px;border-radius:10px;color:var(--color--secondary);cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.try-list li span{color:#a8b8b4;font-size:13px;text-align:right}
.try-list li:hover,.try-list li[aria-selected=true]{background:rgba(86,231,165,.1);color:var(--white)}
.try-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.try-quick button{border:1px solid rgba(255,255,255,.14);background:none;color:var(--color--secondary);padding:8px 14px;border-radius:999px;font:14px var(--font-family--body-font);cursor:pointer}
.try-quick button:hover,.try-quick button.on{border-color:var(--color--primary-two);color:var(--white)}
.try-preview{display:grid;gap:14px;min-width:0}
.try-card{background:var(--color--secondary-bg);border-radius:20px;padding:24px 26px;border:1px solid rgba(255,255,255,.06);transition:opacity .25s}
.try-card.swap{opacity:.4}
.try-kicker{color:var(--color--primary-one);font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 6px}
.try-name{color:var(--white);font-size:26px;line-height:1.2;margin:0 0 14px}
.try-services{list-style:none;margin:0 0 16px;padding:0}
.try-services li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07);color:var(--color--secondary)}
.try-services li span:last-child{color:#a8b8b4;font-size:14px;white-space:nowrap}
.try-cta{display:inline-block;padding:10px 18px;border-radius:999px;background:var(--color--primary-two);color:var(--color--body-bg-color);font-weight:500;font-size:15px}
.try-line{display:flex;justify-content:space-between;gap:12px;color:var(--white);margin:0 0 8px}
.try-line span:last-child{color:#a8b8b4;font-size:14px;white-space:nowrap}
.try-terms{color:var(--color--primary-one);margin:0 0 6px;font-size:15px}
.try-notes{color:#a8b8b4;margin:0;font-size:14px}
.try-start{justify-self:start}
@media screen and (max-width:991px){.plan-tools,.try-grid{grid-template-columns:1fr}}
@media screen and (max-width:479px){.plan-picker,.pipeline-demo,.try-pick{padding:22px}.demo-board{gap:6px}.demo-col{padding:6px;min-height:170px}.demo-card{padding:8px;font-size:13px}.demo-card span{font-size:11.5px}.pricing-top{justify-content:center}.zero-pill{font-size:14px}}
/* Websites page: the badge under each card opens the site */
a.badge-link{text-decoration:none;cursor:pointer}a.badge-link:hover .landing-page-badge{filter:brightness(1.08)}a.badge-link:focus-visible{outline:2px solid #ffd50d;outline-offset:3px;border-radius:999px}
/* Support page: template card colour, green and yellow only */
.support-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}
.support-card{background:var(--color--secondary-bg);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:28px}
.support-main{grid-row:span 3;display:flex;flex-direction:column;gap:14px;justify-content:flex-start}
.support-title{color:var(--white);font-size:28px;line-height:1.2;margin:0 0 6px}
.support-title.small{font-size:20px}
.support-text{color:#a8b8b4;margin:0;font-size:16px}
.support-text a{color:#56e7a5;text-decoration:none;font-weight:500}
.support-text a:hover{text-decoration:underline;text-underline-offset:3px}
.support-button{align-self:flex-start;padding:14px 28px}
.support-small{color:#a8b8b4;font-size:14px;margin:4px 0 0}
@media screen and (max-width:767px){.support-grid{grid-template-columns:1fr}.support-main{grid-row:auto}}
/* directory cards without a photo: the business's own colours, the logo or the initials centred */
.blog-thumbnail-link .blog-thumbnail.dir-ph{display:grid;place-items:center;aspect-ratio:4/3;text-decoration:none;font-size:64px;font-weight:600;letter-spacing:.02em}
.dir-ph.has-logo img{max-width:46%;max-height:46%;object-fit:contain}
/* Privacy and Terms: readable prose in the template's colours */
.legal{max-width:760px;margin:0 auto}
.legal h2{color:var(--white);font-size:24px;line-height:1.3;margin:40px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:#a8b8b4;font-size:17px;line-height:1.7;margin:0 0 12px}
.legal ul{padding-left:22px;margin:0 0 12px}
.legal a{color:#56e7a5;text-decoration:none;font-weight:500}
.legal a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-legal-link{color:inherit;margin-left:14px;text-decoration:none}
.footer-legal-link:hover{text-decoration:underline;text-underline-offset:3px}
/* a signed-in owner reading Support has a clear way back to the app */
.support-back{margin:18px 0 0;text-align:center}
.support-back a{display:inline-flex;align-items:center;gap:8px;color:#56e7a5;font-weight:600;text-decoration:none}
.support-back a:hover{text-decoration:underline;text-underline-offset:3px}