/* Flayr brand: Navy & Mint.
 *
 * Shared by every marketing page (the homepage, pricing, contact, guides,
 * legal) so the look lives in one place: the typeface, the colours, the
 * buttons, the search-style section labels and the search-bar logo.
 */

/* Plus Jakarta Sans (SIL Open Font License), self-hosted: one variable
   file per script, weights 200-800. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --fl-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fl-navy: #0E1A4F;      /* ink, dark sections, secondary buttons */
  --fl-navy-2: #13236A;
  --fl-deep: #0A1440;      /* cards on navy */
  --fl-mint: #2EE8A5;      /* the main call to action, accents */
  --fl-cobalt: #2E48FF;    /* numbers, highlights */
  --fl-muted: #566089;     /* body copy on light */
  --fl-frost: #EFFCF7;     /* soft section background */
  --fl-frost-2: #D6FBEE;
  --fl-on-dark: #D3F8EA;   /* body copy on navy */
  --fl-line: #D6EEE5;
  --fl-radius: 22px;
}

/* ---- buttons ------------------------------------------------------------ */
.fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font: 700 15px/1.2 var(--fl-font); padding: 14px 24px; border-radius: 100px; border: 2px solid var(--fl-navy);
  background: var(--fl-navy); color: #FFFFFF; text-decoration: none; cursor: pointer; transition: transform .15s; }
.fl-btn:hover { transform: translateY(-2px); color: #FFFFFF; }
.fl-btn:focus-visible { outline: 3px solid var(--fl-cobalt); outline-offset: 3px; }
/* The main call to action on every page: mint, navy text. */
.fl-btn.mint { background: var(--fl-mint); border-color: var(--fl-mint); color: var(--fl-navy); }
.fl-btn.mint:hover { color: var(--fl-navy); }
.fl-btn.outline { background: transparent; color: var(--fl-navy); border-color: var(--fl-navy); }
.fl-btn.outline:hover { color: var(--fl-navy); }
.fl-dark .fl-btn.outline, .fl-btn.outline.on-dark { color: #FFFFFF; border-color: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: reduce) { .fl-btn { transition: none; } .fl-btn:hover { transform: none; } }

/* ---- section label: a small search pill with a blinking cursor ------------ */
/* No flex gap: it also sat between the last letter and the cursor, leaving
   the cursor floating a space away from the word. The lens gets its own
   margin, the cursor sits right against the text, and the right padding
   matches the left so the pill closes snugly after the cursor. */
.fl-kick { display: inline-flex; align-items: center; margin-bottom: 18px; padding: 7px 12px 7px 11px;
  font: 700 13px/1.4 var(--fl-font); color: var(--fl-navy); background: #FFFFFF; border: 1px solid var(--fl-line);
  border-radius: 100px; box-shadow: 0 2px 10px rgba(14, 26, 79, .12); }
.fl-kick svg { width: 14px; height: 14px; flex: none; margin-right: 7px; }
.fl-kick::after { content: ""; flex: none; width: 2px; height: 14px; margin-left: 2px; background: var(--fl-mint); animation: fl-blink 1s steps(1) infinite; }
@keyframes fl-blink { 50% { opacity: 0; } }

/* ---- logo: the word "flayr" typed into a search bar ---------------------- */
/* Markup:
     <a class="fl-logo" href="/"><span class="fl-pill"><svg class="fl-mag">…</svg>
       <span class="fl-tw"><span class="fl-cur">flayr</span></span><i class="fl-caret"></i></span></a>
   Size it with font-size on .fl-logo. */
.fl-logo { display: inline-flex; align-items: center; font-size: 30px; line-height: 1; text-decoration: none; color: var(--fl-navy); }
.fl-pill { display: inline-flex; align-items: center; gap: .22em; font: 800 .78em/1 var(--fl-font); letter-spacing: -.045em; color: var(--fl-navy);
  background: #FFFFFF; padding: .16em .55em .2em .4em; border-radius: 1em; border: 1px solid var(--fl-line);
  box-shadow: 0 .06em .24em rgba(14, 26, 79, .16); white-space: nowrap; }
.fl-mag { width: .5em; height: .5em; flex: none; opacity: .55; }
.fl-tw { position: relative; display: inline-block; height: 1.25em; overflow: hidden; vertical-align: middle; }
.fl-cur { display: block; line-height: 1.25em; white-space: pre; }
.fl-caret { display: inline-block; flex: none; width: .075em; height: .82em; margin-left: -.14em; border-radius: .04em; background: var(--fl-mint);
  animation: fl-blink 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .fl-caret, .fl-kick::after { animation: none; } }

/* ---- site header (every marketing page) --------------------------------- */
/* Markup: see the header in responsive-static/index.html. The phone menu is
   driven by /assets/site-nav.js. */
.fl-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fl-line); font-family: var(--fl-font); }
.fl-nav-in { max-width: 1180px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 36px; height: 68px; }
.fl-nav-links { display: flex; gap: 28px; flex: 1; }
.fl-nav-links a { font-weight: 500; font-size: 15px; color: var(--fl-navy); text-decoration: none; }
.fl-nav-links a:hover, .fl-nav-links a[aria-current="page"] { color: var(--fl-cobalt); }
.fl-nav a:focus-visible, .fl-nav button:focus-visible { outline: 3px solid var(--fl-cobalt); outline-offset: 3px; border-radius: 6px; }
.fl-nav-menu { display: none; }
@media (max-width: 900px) {
  .fl-nav-in { gap: 16px; }
  .fl-nav .fl-logo { margin-right: auto; }
  .fl-nav-menu { display: flex; flex-direction: column; gap: 4px; width: 20px; box-sizing: content-box; padding: 12px; margin: -12px -12px -12px -4px;
    background: none; border: 0; cursor: pointer; }
  .fl-nav-menu i { display: block; height: 2px; border-radius: 1px; background: var(--fl-navy); transition: transform .2s, opacity .2s; }
  .fl-nav.is-open .fl-nav-menu i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .fl-nav.is-open .fl-nav-menu i:nth-child(2) { opacity: 0; }
  .fl-nav.is-open .fl-nav-menu i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .fl-nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: #FFFFFF; border-bottom: 1px solid var(--fl-line);
    max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .25s ease, visibility 0s .25s; }
  .fl-nav.is-open .fl-nav-links { max-height: 420px; visibility: visible; transition: max-height .25s ease; }
  .fl-nav-links a { padding: 16px 32px; font-size: 16px; font-weight: 600; border-top: 1px solid var(--fl-line); }
}
@media (max-width: 480px) {
  .fl-nav-in { padding: 0 20px; }
  .fl-nav .fl-logo { font-size: 24px; }
  .fl-nav-in { gap: 12px; }
  .fl-nav-cta { padding: 11px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .fl-nav-menu i, .fl-nav-links { transition: none; } }

/* ---- site footer --------------------------------------------------------- */
/* Navy, with the brand glow; on the homepage it continues the navy block
   above it (.fl-footer.is-flush). */
.fl-footer { position: relative; overflow: hidden; padding: 64px 0 140px; background: var(--fl-navy); color: #FFFFFF; font-family: var(--fl-font); }
.fl-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 0% 100%, rgba(46, 232, 165, .28), transparent 70%), radial-gradient(40% 60% at 100% 0%, rgba(46, 72, 255, .45), transparent 70%); }
.fl-footer.is-flush { padding-top: 0; background: none; }
.fl-footer.is-flush::before { display: none; }
.fl-foot-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.fl-ftop { display: grid; grid-template-columns: 1.1fr .7fr .7fr 2.4fr; gap: 32px; padding-top: 56px; border-top: 1px solid rgba(255, 255, 255, .12); }
.fl-footer:not(.is-flush) .fl-ftop { padding-top: 0; border-top: 0; }
.fl-footer h3 { font: 700 14px/1.5 var(--fl-font); letter-spacing: 0; color: #FFFFFF; margin: 0 0 14px; }
.fl-footer .fl-cl a { display: block; color: var(--fl-on-dark); font-size: 14px; line-height: 1.5; margin-bottom: 9px; text-decoration: none; }
.fl-footer .fl-cl a:hover { color: var(--fl-mint); }
.fl-footer a:focus-visible { outline: 3px solid var(--fl-mint); outline-offset: 3px; border-radius: 4px; }
.fl-fbrand p { font-size: 14px; line-height: 1.5; margin: 14px 0 0; max-width: 220px; color: var(--fl-on-dark); }
.fl-tries { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fl-try { padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.fl-try b { display: block; color: #FFFFFF; font-size: 15px; line-height: 1.4; }
.fl-try p { font-size: 13px; line-height: 1.5; margin: 6px 0 16px; color: var(--fl-on-dark); }
.fl-try .fl-btn { padding: 10px 18px; font-size: 13px; }
.fl-copy { margin: 48px 0 0; font-size: 13px; color: var(--fl-on-dark); opacity: .7; }
.fl-giant { position: absolute; z-index: 0; right: -30px; bottom: -60px; font: 800 300px/1 var(--fl-font); letter-spacing: -.06em;
  color: rgba(255, 255, 255, .05); pointer-events: none; user-select: none; }
@media (max-width: 900px) {
  .fl-ftop { grid-template-columns: 1fr 1fr; }
  .fl-fbrand, .fl-tries { grid-column: 1 / -1; }
  .fl-giant { font-size: 180px; bottom: -36px; }
}
@media (max-width: 480px) {
  .fl-foot-in { padding: 0 20px; }
  .fl-tries { grid-template-columns: 1fr; }
}
/* The logo never pushes the header's other controls out of the row. */
.fl-nav .fl-logo { min-width: 0; }