/* FingoSite public Home page ("Ways to Build C v2", dark/light switch B).
   v7.94.14: replaces the old simple hero (msb-home-hero* in frontend.css,
   now removed) entirely -- see class-msb-editor-frontend.php's
   render_home(). Dark is the default look; light mode is applied by
   adding the class "light" to <html> (see the inline theme-init script
   printed in render_home(), before this stylesheet loads, so there is no
   flash of the wrong theme). Brand orange: --accent on .root below.
   Breakpoints: 1000px (nav collapses to a menu button), 760px (the 3
   fork options become a vertical tree), 640px (phone sizing).

   v7.94.14 additions on top of the original delivered design (marked
   below): (1) hard "no scroll, fills exactly one screen" containment on
   html/body/.root -- the original used min-height:100svh, which lets the
   page grow taller than the viewport (and scroll) if content is ever
   taller than expected; this locks it to the actual viewport height
   instead. (2) --content-width custom property so Settings > Homepage's
   per-variant Content Width field still has something to hook into later
   if wired up. (3) .sb/.menu account-dropdown display rules -- the
   supplied HTML already carried the .menu/.mi/.mic/.mt/.md classes but no
   markup used them (the Account button had no dropdown yet); render_home()
   now builds a real one from the platform's own resolved nav items, and
   these rules are what show/hide it. */
html{background:#05060B;color-scheme:dark;height:100%}
html.light{background:#F8F9FD;color-scheme:light}
/* v7.94.14: true "fits in one screen, never scrolls" containment. The
   viewport height unit is dvh (dynamic viewport height -- shrinks to the
   REAL visible area once a mobile browser's address/toolbar chrome is
   showing, unlike vh which is measured against the LARGEST possible
   viewport and left a gap/allowed a scroll the moment that chrome
   appeared) with vh as the fallback for older browsers that don't
   support dvh. overscroll-behavior stops the iOS/Android "rubber band"
   bounce past the top/bottom from ever revealing empty space under the
   page, which is what a pull-up-while-already-at-the-bottom gesture
   looks like without it. */
html,body{height:100vh;height:100dvh;margin:0;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
.root{--accent:#FF6B1A;--content-width:100%;position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;background:linear-gradient(180deg,#05060B 0%,#0A0E1C 58%,#10152B 100%);color:#fff;font-family:Figtree,system-ui,sans-serif}
.stars{position:absolute;left:0;top:0;width:100%;height:100%}
.glow{position:absolute;border-radius:50%;background:var(--accent);filter:blur(130px);opacity:.4;pointer-events:none;animation:glowp 7s ease-in-out infinite}
/* v7.94.16: .nav and everything through .burger below is the OLD bespoke
   Home header -- unused now that render_home() prints the real platform
   topbar instead (see next block), left in place only because it's
   harmless dead CSS, same reasoning as the v7.94.15 .lb/.li/.ld note just
   below it. */
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;height:88px;box-sizing:border-box;padding:0 64px;flex-shrink:0}
/* v7.94.15: .lb/.li/.ld below were the delivered design's own hand-drawn
   "Fingo[Site]" text lockup -- replaced with the platform's real logo
   image (render_home() now prints an <img class="logo-img">), sized here
   to roughly the same visual height the text lockup had. Left the three
   text-lockup rules in place (harmless, unused) rather than pulling them
   out, in case a future design brings a text wordmark back. */
.logo{display:flex;align-items:center;gap:4px;text-decoration:none;color:#fff;font-family:Montserrat,sans-serif}
.logo-img{display:block;height:40px;width:auto}
.lb{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1}
.li{position:relative;margin-top:5px;font-size:15px;font-weight:700;line-height:1;padding:3px 5px;border:1.5px solid var(--accent);border-radius:2px}
.ld{position:absolute;right:-5px;bottom:-5px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.nr{display:flex;align-items:center;gap:32px}
.links{display:flex;align-items:center;gap:32px}
.nl{display:flex;align-items:center;gap:8px;color:#C4C8D0;text-decoration:none;font-size:16px;font-weight:500;transition:color .15s}
.nl:hover{color:#fff}
.nl svg{flex-shrink:0}
.acct{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:16px;font-weight:700;color:#fff}
.av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;color:#fff;cursor:pointer;border-radius:10px}
a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* v7.94.16 (direct request, "use same header as in other pages... just
   transparent... colour visibility as per mode"): render_home() now
   prints the REAL platform topbar (.msb-topbar, from topbar_html()/
   platform_logo_html() in class-msb-editor-frontend.php) -- the exact
   same markup, admin-configured logo, nav links/icons and account
   dropdown as Dashboard/My Sites/Browse Templates/etc, loaded from
   frontend.css. Everything below is ONLY the transparent-background +
   light/dark colour overrides this page needs on top of that shared
   baseline; frontend.css's normal solid-white topbar on every other
   platform page is completely untouched (nothing here is qualified by a
   page-specific class, but home.css itself is only ever loaded on this
   one page, so there's no cross-page leak). Positioning/spacing/icon
   sizing all stay exactly what frontend.css already defines -- "same
   header... structure and format", just made to fit this page's full-
   bleed dark/light design instead of a plain page canvas. */
.msb-topbar{position:relative;z-index:5;background:transparent;border-bottom:0;flex-shrink:0}
.msb-topbar-inner{max-width:none;margin:0;padding:22px 64px;flex-wrap:nowrap}
.msb-topbar-logo img{display:block}
/* v7.94.17 (direct request, Screenshot_34: "is there any css filter for
   this logo to make it white in dark mode"): the admin-uploaded logo is a
   real raster image (platform_logo_html() prints a plain <img src="...">
   of whatever file Settings > Platform has on file) with its own baked-in
   colours, so unlike the text-based .msb-topbar-textlogo fallback just
   below it, it can't simply inherit color:#fff. brightness(0) first
   crushes every pixel to solid black regardless of its original colour
   (including any transparent/alpha pixels, which stay transparent), then
   invert(1) flips that solid black to solid white -- a common trick for
   recolouring a single-tone logo image without a dedicated white-variant
   file. Only applied in dark mode; html.light below cancels it back to
   the logo's real original colours, same as it already renders on every
   other (light-background) platform page. */
.msb-topbar-logo img{filter:brightness(0) invert(1)}
.msb-topbar-textlogo{font-family:Montserrat,sans-serif;font-weight:800;font-size:22px}
/* Dark (default, no .light class on <html>): white, same as every other
   piece of foreground text/icon on this page in dark mode. */
.msb-topbar-textlogo,.msb-topbar-links a,.msb-topbar-user,.msb-user-trigger,.msb-user-trigger-name,.msb-mobile-menu-trigger,.msb-mobile-avatar{color:#fff}
.msb-topbar-links a.msb-nav-active{color:#fff;font-weight:700}
/* v7.94.22 BUGFIX (direct report: "on hover desktop version menu getting
   hidden"): frontend.css's own .msb-nav-common a:hover{color:var(--msb-
   fg)} (its normal hover colour on every OTHER, light-background platform
   page) was winning over this page's white-in-dark-mode rule just above
   -- same 0,2,1 specificity (one class + :hover + the element) as the
   plain a.msb-nav-active rule can't beat, and :hover as a pseudo-class
   only ties, it doesn't lose, so frontend.css's rule applied here too.
   --msb-fg is the admin's Platform Appearance page-foreground colour
   (near-black, #111 by default) -- fine on those pages' white background,
   but on this page's own dark gradient it made the hovered link's text
   nearly invisible against the background the instant the mouse touched
   it, exactly matching the report. This rule matches that specificity
   (0,2,1) and, loaded after frontend.css, wins the tie -- hover simply
   keeps the same white the link already has (no colour *change* on
   hover here at all, by design: a brightness/underline cue would need
   its own visible-on-dark treatment, and plain "stays legible" was the
   safest fix for a reported disappearing-text bug). */
.msb-topbar-links a:hover{color:#fff}
.msb-avatar-fallback{background:rgba(255,255,255,.16);color:#fff}
.msb-user-dropdown,.msb-mobile-menu-panel{background:#0F1428;border-color:#2A3350;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.msb-user-dropdown a,.msb-mobile-menu-panel a{color:#fff;border-bottom-color:#232A45}
.msb-user-dropdown a:hover,.msb-mobile-menu-panel a:hover{background:rgba(255,255,255,.06)}
.msb-user-plan-badge{background:rgba(255,255,255,.05);border-bottom-color:#232A45}
.msb-user-plan-label,.msb-user-plan-badge a.msb-user-plan-link{color:#fff}
/* Light (html.light): the platform's own normal colours -- close to what
   frontend.css already ships by default, restated explicitly here rather
   than left to inherit so a customized Platform Appearance colour can
   never accidentally read as too-light-on-light on this specific page. */
html.light .msb-topbar-logo img{filter:none}
html.light .msb-topbar-textlogo,html.light .msb-topbar-links a,html.light .msb-topbar-user,html.light .msb-user-trigger,html.light .msb-user-trigger-name,html.light .msb-mobile-menu-trigger,html.light .msb-mobile-avatar{color:#0B0F1E}
html.light .msb-topbar-links a.msb-nav-active{color:#0B0F1E}
/* v7.94.22: same hover fix as the dark-mode rule above, for light mode --
   here --msb-fg (#111 by default) happens to read fine against a white
   background, so this page never showed the bug in light mode, but it's
   pinned explicitly anyway so a customized (lighter) Platform Appearance
   colour can never make the SAME bug appear here too. */
html.light .msb-topbar-links a:hover{color:#0B0F1E}
html.light .msb-avatar-fallback{background:#0B0F1E;color:#fff}
html.light .msb-user-dropdown,html.light .msb-mobile-menu-panel{background:#FFFFFF;border-color:#C3CCE6;box-shadow:0 20px 60px rgba(40,50,100,.18)}
html.light .msb-user-dropdown a,html.light .msb-mobile-menu-panel a{color:#0B0F1E;border-bottom-color:#EEF1F9}
html.light .msb-user-dropdown a:hover,html.light .msb-mobile-menu-panel a:hover{background:rgba(11,15,30,.05)}
html.light .msb-user-plan-badge{background:rgba(11,15,30,.04);border-bottom-color:#EEF1F9}
html.light .msb-user-plan-label,html.light .msb-user-plan-badge a.msb-user-plan-link{color:#0B0F1E}
@media (max-width:780px){.msb-topbar-inner{padding:16px 20px}}
.hero{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 24px 0}
.h1{margin:0;font-family:Unbounded,sans-serif;font-weight:700;font-size:clamp(24px,3.6vw + 1vh,56px);line-height:1.14;letter-spacing:-.03em;text-wrap:balance}
.sub{margin:20px 0 0;font-size:clamp(16px,1.4vw + .6vh,22px);font-weight:600;color:#F0F2F8;line-height:1.35}
.tag{margin:8px 0 0;font-size:clamp(14px,1.1vw + .4vh,18px);color:#98A2BA}
.sub2{margin:20px 0 0;max-width:640px;font-size:clamp(15px,1.3vw + .5vh,20px);font-weight:500;line-height:1.55;color:#C9CFDF}
.row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:56px;padding:0 34px;border-radius:999px;font-family:inherit;font-weight:700;font-size:17px;text-decoration:none;transition:transform .15s ease;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.b1{background:var(--accent);color:#0A0A0A;box-shadow:0 0 44px color-mix(in srgb,var(--accent) 45%,transparent)}
.b2{border:1.5px solid rgba(255,255,255,.28);color:#fff;font-weight:600;background:none}
.mid{flex-grow:1;justify-content:center;padding-bottom:48px}
.art2{position:relative;z-index:1;flex-grow:1;min-height:0}
.art2 svg{position:absolute;left:0;top:0;width:100%;height:100%}
.split{position:relative;z-index:3;flex-grow:1;display:flex;align-items:center;justify-content:space-between;gap:48px;padding:0 64px 32px;min-height:0}
.copy{width:min(600px,46%);align-items:flex-start;text-align:left;padding:0}
.copy .row{justify-content:flex-start}
.art3{flex:1;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}
.art3 svg.fit{width:100%;height:auto;max-height:100%}
.bg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}
.dsk{display:block}.mob{display:none}
@keyframes glowp{0%,100%{opacity:.34}50%{opacity:.5}}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes rot{to{transform:rotate(360deg)}}
.tw{animation:tw 4s ease-in-out infinite}
.rot{animation:rot 60s linear infinite}
@media (max-width:1000px){
.nav{padding:0 32px}.links{display:none}.burger{display:flex}.nr{gap:12px}
.split{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:16px 32px 24px;gap:16px}
.copy{width:100%}.art3{flex-grow:1;height:auto;min-height:0}}
@media (max-width:640px){
.nav{height:72px;padding:0 20px}.lb{font-size:30px}.li{font-size:13px}.logo-img{height:32px}
.al,.chev{display:none}
.hero{padding:12px 20px 0}
.row{flex-direction:column;align-items:stretch;width:100%;margin-top:24px}
.split{padding:12px 20px 20px}
.copy{padding:0}
.dsk{display:none}.mob{display:block}}
@media (prefers-reduced-motion: reduce){*{animation:none !important}}
@keyframes draw{0%{stroke-dasharray:1;stroke-dashoffset:1}28%,88%{stroke-dasharray:1;stroke-dashoffset:0}100%{stroke-dasharray:1;stroke-dashoffset:1}}
@keyframes seg{0%{stroke-dasharray:1;stroke-dashoffset:1}4%,88%{stroke-dasharray:1;stroke-dashoffset:0}100%{stroke-dasharray:1;stroke-dashoffset:1}}
@keyframes fg{0%,24%{opacity:0}34%,88%{opacity:1}100%{opacity:0}}
@keyframes pt{0%{opacity:0;transform:scale(.3)}4%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.3)}}
@keyframes march{to{stroke-dashoffset:-24}}
.dl{animation:draw var(--dur,10s) ease-in-out infinite both}
.sg{animation:seg var(--dur,12s) linear infinite both}
.fg{animation:fg var(--dur,10s) ease infinite both}
.pt{transform-box:fill-box;transform-origin:center;animation:pt var(--dur,12s) ease infinite both}
.march{animation:march 2s linear infinite}
.lbl{font-family:Unbounded,sans-serif;font-size:15px;font-weight:600;fill:#E6E9F2;stroke:none}
@media (prefers-reduced-motion: reduce){.curs{display:none}}
@keyframes sx{0%{transform:scaleX(0)}10%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes sy{0%{transform:scaleY(0)}10%,88%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.wfmain{position:relative;z-index:3;flex-grow:1;display:flex;align-items:center;justify-content:center;padding:0;min-height:0}
/* v7.94.14: width:min(1000px, calc(100% - 64px)) is the ORIGINAL design's
   own tuned frame width, left untouched -- see render_home()'s own note
   on why Settings > Homepage > Content Width isn't wired into this
   particular design (it would fight the hand-tuned connector-line/fork
   geometry below, which all assumes this exact frame width). */
.wf{position:relative;width:min(1000px,calc(100% - 64px));max-height:100%}
/* v7.94.15 BUGFIX (Screenshots_24/25, red-boxed): the decorative "address
   bar" frame chrome inside .wf -- the .lh horizontal line and the two .nn
   dots home_frame_decoration() places at top:56px -- was drawn straight
   through the H1 whenever .wfin's top padding shrank below that 56px, which
   the v7.94.14 short-viewport work made possible on ordinary desktop/
   laptop window heights too (its own clamp()'s floor was 28px, and even
   the vh-scaled middle of the range dipped under 56px around 800-900px
   tall browser windows -- exactly what both screenshots showed). The
   original delivered design never hit this because it used a fixed 88px,
   with no vh-based shrink at all. Raised the floor here to 72px (56px of
   clearance below the line, plus a margin) for ordinary heights; the two
   dedicated max-height media queries further down (700px/560px) still
   shrink this further for genuinely short phones, where the line/dots are
   hidden outright instead (see those queries) rather than risking the
   same overlap at an even tighter floor. */
.wfin{padding:clamp(72px,7vh,88px) 56px clamp(20px,5vh,60px);display:flex;flex-direction:column;align-items:center;box-sizing:border-box}
.ln{position:absolute;display:block;background:#8595CC;opacity:.9}
.lt{left:0;right:0;top:0;height:1.6px;transform-origin:left center;animation:sx 12s ease-in-out infinite both}
.lr{top:0;bottom:0;right:0;width:1.6px;transform-origin:center top;animation:sy 12s ease-in-out .5s infinite both}
.lbt{left:0;right:0;bottom:0;height:1.6px;transform-origin:right center;animation:sx 12s ease-in-out 1s infinite both}
.ll{top:0;bottom:0;left:0;width:1.6px;transform-origin:center bottom;animation:sy 12s ease-in-out 1.5s infinite both}
.lh{left:0;right:0;top:56px;height:1.6px;opacity:.45;transform-origin:left center;animation:sx 12s ease-in-out 2s infinite both}
.nn{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#fff;animation:pt 12s ease infinite both}
.na{background:var(--accent)}
.pill{position:absolute;top:18px;left:92px;width:min(320px,38%);height:20px;box-sizing:border-box;border:1.5px solid rgba(133,149,204,.55);border-radius:999px;animation:fg 12s ease 2.2s infinite both}
.sat7{position:absolute;width:140px;height:92px;box-sizing:border-box;border:1.5px dashed var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;animation:fg 12s ease 3s infinite both}
.cn7{position:absolute;width:60px;height:0;border-top:1.5px dashed var(--accent);animation:fg 12s ease 3s infinite both}
@media (max-width:1400px){.sat7,.cn7{display:none}}
/* v7.94.16 BUGFIX (Screenshot_32, red-boxed: "in mobile screens with
   short height there is an overlap issue"): the earlier v7.94.15 fix for
   this same overlap only hid the .lh line/its two .nn dots (both fixed at
   top:56px inside .wf) inside the max-height:700px/560px queries -- but
   real mobile Chrome/Safari report their viewport height WITHOUT their
   own address-bar/toolbar chrome subtracted to a plain max-height query
   (only *dvh* units track that), so a phone whose reported height was
   just over 700px could still end up with LESS real usable space than
   that once its toolbar was showing -- exactly the gap that let this
   still slip through. Rather than chase that with more height
   thresholds, this decorative "address bar" mock (purely cosmetic, no
   functional purpose) is now hidden on every phone-width screen
   unconditionally, regardless of height -- guaranteed to never overlap
   the heading again, and one line simpler than trying to keep 56px of
   clearance across every dynamic-toolbar state. */
/* v7.94.19/20: fixed 80px top padding on phone-width screens, replacing
   the earlier vh-based clamp() -- matches the exact value the person
   tuned and confirmed via devtools, on the exact compound selector they
   inspected it on (.hero.wfin -- the hero block always carries both
   classes together, see render_home()'s `<div class="hero wfin">`, so
   this matches .wfin alone in effect but mirrors their own devtools rule
   one-to-one). Only the top side is fixed; left/right/bottom stay on
   their existing values. The short-viewport queries further down
   (max-height:700px/560px) still override padding-top with their own,
   smaller figures for genuinely short screens -- unchanged. */
@media (max-width:640px){.lh,.nn[style*="top:56px"]{display:none}.wfin{padding:80px 22px clamp(16px,4vh,36px)}.hero.wfin{padding-top:80px}.wf{width:calc(100% - 32px)}.pill{left:80px}}
.bgglow{position:absolute;left:50%;top:52%;width:980px;height:980px;margin:-490px 0 0 -490px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,107,26,.42),rgba(255,107,26,0));animation:bgp 7s ease-in-out infinite}
@supports (background:color-mix(in srgb,red 10%,transparent)){.bgglow{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 42%,transparent),color-mix(in srgb,var(--accent) 0%,transparent))}}
@keyframes bgp{0%,100%{opacity:.8}50%{opacity:1}}
@media (max-width:1000px){.bgglow{width:760px;height:760px;margin:-380px 0 0 -380px}}
@media (max-width:640px){
.bgglow{top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;background:radial-gradient(closest-side,rgba(255,107,26,.2),rgba(255,107,26,0))}}
@media (max-width:640px){@supports (background:color-mix(in srgb,red 10%,transparent)){.bgglow{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent) 0%,transparent))}}}

.btn svg{margin-right:10px;flex-shrink:0}
.btn svg.cv{margin:0 0 0 10px}
.sb{position:relative;display:inline-flex}
.menu{display:none;position:absolute;top:calc(100% + 10px);right:0;left:auto;width:min(280px,calc(100vw - 40px));box-sizing:border-box;padding:8px;background:#0F1428;border:1px solid #2A3350;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.55);z-index:20;text-align:left}
/* v7.94.14: the delivered .menu/.mi/.mic/.mt/.md classes had no markup
   using them yet (the Account button had no dropdown behind it) -- these
   two rules are the actual show/hide toggle now that render_home() wires
   a real one, driven by the "open" class home-hero.js adds to the
   .sb wrapper on click (mirrors the existing .nav.open pattern below). */
.sb.open .menu{display:block}
.mi{display:flex;gap:14px;align-items:center;padding:10px 12px;border-radius:12px;color:#fff;text-decoration:none}
.mi:hover{background:rgba(255,255,255,.06)}
.mic{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,107,26,.18);color:var(--accent)}
@supports (background:color-mix(in srgb,red 10%,transparent)){.mic{background:color-mix(in srgb,var(--accent) 18%,transparent)}}
.mt{display:block;font-size:15px;font-weight:700}
.md{display:block;margin-top:2px;font-size:13px;color:#98A2BA;line-height:1.35}
.ql{margin-top:18px;color:#E6E9F2;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;gap:8px}
.ql svg{color:var(--accent)}
@media (max-width:640px){.sb{width:auto}.menu{right:0;left:auto;width:min(280px,calc(100vw - 32px))}}

/* quicker frame draw (7s loop) */
@keyframes fg2{0%{opacity:0}12%,88%{opacity:1}100%{opacity:0}}
.lt{animation:sx 7s ease-in-out infinite both}
.lr{animation:sy 7s ease-in-out .25s infinite both}
.lbt{animation:sx 7s ease-in-out .5s infinite both}
.ll{animation:sy 7s ease-in-out .75s infinite both}
.lh{animation:sx 7s ease-in-out 1s infinite both}
.nn{animation-duration:7s}
.pill{animation:fg2 7s ease 1s infinite both}
.sat7,.cn7{animation:fg2 7s ease 1.2s infinite both}
.btn.sm{height:48px;padding:0 26px;font-size:16px}
.gl{margin-top:22px}
/* fork: options are always visible, only the connectors draw (5s loop) */
@keyframes fvd{0%{transform:scaleY(0)}12%,86%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}
@keyframes fhd{0%{transform:scaleX(0)}12%,86%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
@keyframes fndk{0%{opacity:0;transform:scale(.3)}10%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.3)}}
@keyframes pdt{0%,26%{top:0;opacity:0}28%{top:0;opacity:1}38%{top:22px;opacity:1}39%,100%{top:22px;opacity:0}}
@keyframes pdl{0%,38%{left:50%;top:22px;opacity:0}39%{left:50%;top:22px;opacity:1}52%{left:calc((100% - 28px)/6);top:22px;opacity:1}62%{left:calc((100% - 28px)/6);top:44px;opacity:1}63%,100%{left:calc((100% - 28px)/6);top:44px;opacity:0}}
@keyframes pdr{0%,38%{left:50%;top:22px;opacity:0}39%{left:50%;top:22px;opacity:1}52%{left:calc(100% - (100% - 28px)/6);top:22px;opacity:1}62%{left:calc(100% - (100% - 28px)/6);top:44px;opacity:1}63%,100%{left:calc(100% - (100% - 28px)/6);top:44px;opacity:0}}
@keyframes pdc{0%,38%{top:22px;opacity:0}39%{top:22px;opacity:1}62%{top:44px;opacity:1}63%,100%{top:44px;opacity:0}}
@keyframes cglow{0%,58%{box-shadow:0 0 0 0 rgba(255,107,26,0)}66%{box-shadow:0 0 0 6px rgba(255,107,26,.3)}82%,100%{box-shadow:0 0 0 0 rgba(255,107,26,0)}}
.fk{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:30px}
.fkl{position:relative;width:100%;height:44px}
.fv{position:absolute;width:1.6px;margin-left:-.8px;background:#8595CC;transform-origin:center top;animation:fvd 5s ease-in-out infinite both}
.fhz{position:absolute;top:22px;height:1.6px;margin-top:-.8px;background:#8595CC;left:calc((100% - 28px)/6);right:calc((100% - 28px)/6);transform-origin:center;animation:fhd 5s ease-in-out .3s infinite both}
.fnd{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;animation:fndk 5s ease infinite both}
.fnd.a{background:var(--accent)}
.pd{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);opacity:0}
.pdt{left:50%;animation:pdt 5s linear infinite both}
.pdl{animation:pdl 5s linear infinite both}
.pdr{animation:pdr 5s linear infinite both}
.pdc{left:50%;animation:pdc 5s linear infinite both}
.fkc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%}
.fcol{position:relative}
.fp{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;box-sizing:border-box;padding:0 14px;border-radius:999px;border:1.5px solid #3A4670;background:rgba(15,20,40,.78);color:#fff;text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap;transition:border-color .15s,transform .15s;animation:cglow 5s ease infinite both}
.fp:hover{border-color:var(--accent);transform:translateY(-2px)}
.fp svg{margin:0;color:var(--accent);flex-shrink:0}
.fp.ai{border-color:var(--accent)}
@media (max-width:1000px){.fp{font-size:14px;gap:8px;padding:0 10px}}
@media (max-width:760px){
.fk{align-items:stretch;margin-top:22px}
.fk>.btn{width:100%;box-sizing:border-box}
.fkl{height:22px}
.dk{display:none}
.fkl .fvr{left:22px !important}
.fkl .fnd.a{left:22px !important}
.fkl .pdt{left:22px !important}
.fkc{display:flex;flex-direction:column;gap:10px;position:relative;padding-left:44px}
.fkc:before{content:"";position:absolute;left:22px;top:0;bottom:26px;width:1.6px;margin-left:-.8px;background:#8595CC;transform-origin:center top;animation:fvd 5s ease-in-out .3s infinite both}
.fcol:before{content:"";position:absolute;left:-22px;top:26px;width:22px;height:1.6px;margin-top:-.8px;background:#8595CC;transform-origin:left center;animation:fhd 5s ease-in-out .6s infinite both}
.fcol:after{content:"";position:absolute;left:-22px;top:26px;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff;animation:fndk 5s ease .6s infinite both}
.fcol:nth-child(2):before,.fcol:nth-child(2):after{animation-delay:.8s}
.fcol:nth-child(3):before,.fcol:nth-child(3):after{animation-delay:1s}
.fp{justify-content:flex-start;padding:0 18px;font-size:15px}
.gl{width:100%;box-sizing:border-box}
}

.sub,.sub2{text-wrap:balance}
.tl{white-space:nowrap}
@media (max-width:640px){.tl{display:block}.dbr{display:none}}
@media (max-width:760px){.fkc{box-sizing:border-box;width:100%}}
/* phone refinements: smaller type, more breathing room */
.tagsp{color:rgba(255,255,255,.85);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16.5px}
/* direct request (Screenshot_62/63): on phone-width screens the "3 ways to
   build" fork (Fingo Intelligence / Browse templates / Start from scratch)
   is hidden entirely -- only the 2 primary CTAs stay (Start building/New
   site + Log in/Go to Dashboard, already login-state-aware server-side in
   render_home()). .fkl is the decorative connector-line wrapper, .fkc is
   the 3-option row itself -- both are direct children of .fk alongside the
   two real buttons, so hiding just these two leaves the buttons' own flex
   gap (.gl's margin-top) as the only space between them.
   Unchanged at ≥641px (tablet/desktop keep all 3 fork options). Not
   touching .gl's own margin-top here -- it's a flex-column gap measured
   from whichever sibling is actually visible, so with .fkl/.fkc removed
   from flow it already becomes the sole gap between the two buttons at
   its existing tuned value (20px here, 12px/8px under the shorter-
   viewport queries further down), no separate override needed. */
@media (max-width:640px){
.fkl,.fkc{display:none}
}
@media (max-width:640px){
.wf{width:calc(100% - 32px)}
/* v7.94.14: no white-space:nowrap here (the delivered design had it,
   tuned to its own short sample copy) -- Title is an admin-editable
   Settings > Homepage field of arbitrary length, and forcing one line
   cut real (longer) copy off past the viewport edge instead of wrapping
   it. text-wrap:balance on the base .h1 rule above still keeps whatever
   number of lines it wraps to looking even, rather than one long line
   and one short one. */
.h1{font-size:clamp(16px,calc(6.4vw - 4px),22px);line-height:1.35;letter-spacing:-.02em}
.sub{margin-top:18px;font-size:15px;line-height:1.55}
.sub2{margin-top:18px;font-size:14.5px;line-height:1.65}
.tag{margin-top:10px}
.tagsp{font-size:13.5px;line-height:1.65}
.fk{margin-top:28px}
.btn{height:50px;font-size:16px;padding:0 24px}
.btn.sm{height:44px;font-size:15px}
.gl{margin-top:20px}
.fp{height:46px;font-size:14px;padding:0 16px}
.fkc{gap:10px}
.fkc:before{bottom:23px}
.fcol:before,.fcol:after{top:23px}
}

/* v7.94.14: short-viewport safety net. The rules above size type with vh-
   aware clamp()s, but the FIXED chrome around that type -- nav bar height,
   inter-block margins, button heights, the fork's own margin-top -- stayed
   constant regardless of viewport height. On a short phone (iPhone SE,
   667px tall, or any small Android in landscape-ish aspect) that fixed
   chrome alone could add up to more than the viewport, and since html/body
   use overflow:hidden (the "never scrolls" containment above) the excess
   wasn't a scrollbar, it was actually-invisible content -- e.g. the "Log
   in" button clipped off entirely. This tightens the same chrome further
   whenever height is tight, independent of width, so everything stays
   fully visible instead of being cut off. */
/* v7.94.17 REWORK (Screenshot_33, direct request: "There is overlap in
   mobile version still, I think we can set one minimum height and ignore
   100vh rule in small height screens"): the v7.94.14/16 approach above
   this comment kept shrinking type/spacing further and further to try to
   force everything into a truly fixed, non-scrolling viewport -- but real
   mobile browsers report their height to a max-height media query WITHOUT
   subtracting their own dynamic address-bar/toolbar chrome (only dvh
   units do that, and only for the html/body box itself, not for what a
   media query sees), so a phone that measured just over a threshold here
   could still end up with less real usable space once its toolbar showed,
   and the overlap kept slipping through no matter how tight the
   thresholds got. Per direct instruction, short screens now get a
   min-height instead: the "never scrolls" containment further up this
   file (html,body{overflow:hidden}, .root{height:100%;overflow:hidden})
   is relaxed here to allow ordinary vertical scrolling, and the content
   is allowed to take whatever height it actually needs rather than being
   compressed to fit an unreliable measurement. This only loosens the
   no-scroll rule on short heights -- ordinary phone/desktop heights above
   these thresholds are completely untouched and still fill exactly one
   screen with no scroll, same as before. */
@media (max-height:700px){
html,body{height:auto;min-height:100vh;min-height:100dvh;overflow-y:auto;overflow-x:hidden}
.root{height:auto;min-height:100%;min-height:100dvh;overflow:visible}
/* the .lh line/its two .nn dots (fixed at top:56px inside .wf) stay
   hidden here regardless -- purely decorative "address bar" chrome, and
   with .wfin's padding-top this tight there's no reason to keep drawing
   it under the heading even once scrolling is available. */
.lh,.nn[style*="top:56px"]{display:none}
/* v7.94.17: .bgglow is a fixed-size (980px) absolutely-positioned ambient
   glow, sized independently of .root's own box -- harmless under the old
   overflow:hidden containment (it just got visually clipped to whatever
   space was left), but now that .root/.html/.body allow real scrolling
   here, its full un-clipped extent would count toward the scrollable
   area too, adding a large stretch of empty scroll space below the real
   content for no visual reason. Purely decorative, so it's simplest to
   drop it here rather than try to keep it perfectly sized to a viewport
   height this breakpoint already treats as unreliable. */
.bgglow{display:none}
.nav{height:60px}
.hero{padding-top:10px}
.h1{font-size:clamp(15px,calc(5.4vw - 2px) ,20px);line-height:1.28}
.sub{margin-top:10px;font-size:14px;line-height:1.4}
.sub2{margin-top:10px;font-size:13px;line-height:1.5}
.tag{margin-top:6px}
.tagsp{font-size:12.5px}
.row{margin-top:14px;gap:8px}
.btn{height:42px;font-size:14px;padding:0 20px}
.btn.sm{height:38px;font-size:13px}
.gl{margin-top:12px}
.fk{margin-top:14px;margin-bottom:14px}
.fkl{height:16px}
.fp{height:38px;font-size:13px;padding:0 12px}
.fkc{gap:6px}
.wfin{padding:clamp(10px,4vh,40px) 24px clamp(16px,4vh,40px)}
.tgi{width:30px;height:30px}
.tgi svg{width:15px;height:15px}
}
@media (max-height:560px){
.nav{height:52px}
.msb-topbar-inner{padding:8px 20px}
.msb-topbar-logo img{max-height:28px !important}
.hero{padding-top:6px}
.h1{font-size:clamp(14px,calc(5vw - 2px),18px)}
/* v7.94.17: .sub/.sub2 used to be hidden outright at this tier -- with
   scrolling now available there's no need to drop copy just to make it
   fit, so they stay visible (smaller) instead. */
.sub{font-size:13px;line-height:1.4}
.sub2{font-size:12.5px;line-height:1.5}
.row{margin-top:10px;gap:6px}
.btn{height:34px;font-size:12px}
.fk{margin-top:10px;margin-bottom:10px}
.fkl{height:12px}
.fp{height:32px;font-size:12px;padding:0 10px}
.fkc{gap:5px}
.gl{margin-top:8px}
.tgi{width:26px;height:26px}
.tgi svg{width:13px;height:13px}
}

/* theme switch */
/* v7.94.21 (direct request, "don't like this box within box for mode
   switch, just 2 icons without any label... make sure icon is perfectly
   center middle pixel perfect visual alignment"): dropped the outer .tgf
   pill (background/border/shadow) and the inner .tg pill (its own
   background/border) plus the sliding .tk thumb and the .tgl text label
   entirely -- .tgf is now just a fixed-position anchor with no visual
   chrome of its own, .tg is a plain unstyled button, and each icon lives
   in its own .tgi circle. Both .tgi circles use the exact same
   width/height and center their svg with flex (align-items/justify-
   content:center), so the moon and sun glyphs land on the identical
   center point regardless of their own viewBox content -- no box-within-
   box, no label, pixel-identical alignment between the two icons. The
   active mode's icon (the one matching the CURRENT theme, not the one
   clicking switches to) gets a solid accent-colour circle behind it,
   driven by the <html> theme class already used everywhere else on this
   page rather than a separate JS-toggled class. */
.tgf{position:fixed;right:24px;bottom:max(24px,env(safe-area-inset-bottom));z-index:30}
.tg{position:relative;display:inline-flex;align-items:center;gap:2px;background:none;border:0;padding:0;margin:0;cursor:pointer;flex-shrink:0}
.tgi{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#98A2BA;transition:background .15s,color .15s}
.tgi svg{display:block;width:18px;height:18px}
html:not(.light) .tg .mn{background:var(--accent);color:#0A0A0A}
html.light .tg .sn{background:var(--accent);color:#0A0A0A}
.av-out{background:#2A2A31;color:#FFFFFF}
.av-in{background:var(--accent);color:#0A0A0A}
@media (max-width:640px){.tgf{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}}
/* light mode */
html.light .root{background:linear-gradient(180deg,#F8F9FD 0%,#EEF1F9 60%,#E5E9F5 100%);color:#0B0F1E}
html.light .root .stars{opacity:.4}
html.light .root .stars circle{fill:#7683B5}
html.light .root .bgglow{background:radial-gradient(closest-side,rgba(255,107,26,.24),rgba(255,107,26,0))}
@supports (background:color-mix(in srgb,red 10%,transparent)){html.light .root .bgglow{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--accent) 0%,transparent))}}
@media (max-width:640px){html.light .root .bgglow{background:radial-gradient(closest-side,rgba(255,107,26,.16),rgba(255,107,26,0))}}
@media (max-width:640px){@supports (background:color-mix(in srgb,red 10%,transparent)){html.light .root .bgglow{background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--accent) 0%,transparent))}}}
html.light .root .logo{color:#0B0F1E}
html.light .root .nl{color:#4A5470}
html.light .root .nl:hover{color:#0B0F1E}
html.light .root .acct,html.light .root .burger{color:#0B0F1E}
html.light .root .av-out{background:#0B0F1E;color:#FFFFFF}
html.light .root .sub{color:#0B0F1E}
html.light .root .tag,html.light .root .tagsp{color:#4A5470}
html.light .root .sub2{color:#3A4360}
html.light .root .b2{border-color:rgba(11,15,30,.28);color:#0B0F1E}
html.light .root .b1{box-shadow:0 12px 32px rgba(255,107,26,.32)}
html.light .root .ln,html.light .root .fv,html.light .root .fhz{background:#7684B8}
html.light .root .nn:not(.na),html.light .root .fnd:not(.a){background:#2B3358}
html.light .root .pill{border-color:rgba(91,107,168,.55)}
html.light .root .fp{border-color:#C3CCE6;background:rgba(255,255,255,.9);color:#0B0F1E}
html.light .root .fp.ai{border-color:var(--accent)}
html.light .root .fkc:before,html.light .root .fcol:before{background:#7684B8}
html.light .root .fcol:after{background:#2B3358}
/* v7.94.21: .tg/.tgf no longer render as pills (see the "theme switch"
   block above), so their old light-mode background/border overrides are
   gone -- .tgi's own dark-vs-light icon colour is now handled entirely by
   the html:not(.light)/html.light rules right next to its base rule. */
html.light .root .tgi{color:#5B6690}
html.light .root a:focus-visible,html.light .root button:focus-visible{outline-color:#0B0F1E}
html.light .root .menu{background:#FFFFFF;border-color:#C3CCE6;box-shadow:0 20px 60px rgba(40,50,100,.18)}
html.light .root .mi{color:#0B0F1E}
html.light .root .mi:hover{background:rgba(11,15,30,.06)}
html.light .root .md{color:#4A5470}

@media (max-width:1000px){
.nav.open .links{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:calc(100% - 8px);left:16px;right:16px;padding:20px;gap:18px;background:#0F1428;border:1px solid #262C3B;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);z-index:10}
html.light .root .nav.open .links{background:#FFFFFF;border-color:#C3CCE6;box-shadow:0 20px 60px rgba(40,50,100,.18)}
}