/* Pages made from Framer's own HTML (tools/framer-import.js). Loaded after legacy.css and before the page's
   Framer CSS. Only fixes what Framer's JavaScript would otherwise do in the browser. */

/* Our shared header and footer sit inside Framer's page column. */
#main .lg-hdr-wrap, #main .lg-foot { width: 100%; flex: none; }
#main .lg-hdr-wrap { z-index: 10; }
#main .lg-foot { align-self: stretch; }
/* Some pages (the blog) give their sections a flex order on tablet and phone; keep the footer last. */
#main .lg-foot { order: 9999; }
@media (max-width: 1311.98px) { #main .lg-foot { align-self: flex-start; } }

/* Framer's inner links (<span href>) behave like links. */
[data-nested-link][href] { cursor: pointer; }

/* FeatureAccordion (Framer code component). Framer sets these styles with JavaScript after the page loads;
   legacy.js does the same. Values come from the component's settings on the live page. */
[data-lg-accordion] [role="button"] > div { font-size: var(--acc-title, 14px); line-height: 1.3; color: var(--acc-collapsed, rgba(15, 28, 25, .7)); transition: color .32s cubic-bezier(.25, .1, .25, 1); }
[data-lg-accordion] .is-open > [role="button"] > div,
[data-lg-accordion] .is-hover > [role="button"] > div { color: var(--acc-expanded, rgb(15, 28, 25)); }
[data-lg-accordion] .is-open > [role="button"] > div { font-size: var(--acc-title-open, var(--acc-title, 14px)); }
[data-lg-accordion] [role="button"] + div { transition: height .32s cubic-bezier(.2, .8, .2, 1), opacity .18s cubic-bezier(.25, .1, .25, 1); }
[data-lg-accordion] .is-open > [role="button"] + div { transition: height .32s cubic-bezier(.2, .8, .2, 1), opacity .28s cubic-bezier(.25, .1, .25, 1) .04s; }
[data-lg-accordion] [role="button"] + div + div { transition: opacity .32s cubic-bezier(.25, .1, .25, 1); }
[data-lg-accordion] .lg-acc-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--acc-bar, rgb(104, 103, 101)); transform-origin: left center; transform: scaleX(0); }
[data-lg-accordion] .lg-acc-bar.is-run { transform: scaleX(1); transition: transform linear var(--acc-interval, 15s); }
@media (prefers-reduced-motion: reduce) { [data-lg-accordion] * { transition: none !important; } }

/* Framer form submit button (copied pages): hover and the Loading state, as Framer's button variants. */
form[data-framer-form] button[type="submit"] { cursor: pointer; transition: background-color .2s ease; }
form[data-framer-form]:not([data-state="error"]) button[type="submit"]:hover { background-color: rgba(51, 51, 51, .85) !important; }
form[data-framer-form] button.lg-is-loading { cursor: default; position: relative; }
form[data-framer-form] button.lg-is-loading p { visibility: hidden; }
form[data-framer-form] button.lg-is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0), #fff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: lg-spin 1s linear infinite; }
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* /payments "Authenticate transaction" card, tablets (Oct 30 fix). Framer sizes its box to its content
   (min-content) while the card's frame is 1px wide and grows to fill, so the box came out 145px wide
   and clipped the card to a sliver (on the live site too). Give the frame its desktop width. */
@media (min-width:810px) and (max-width:1311.98px){
  .framer-xyX7m .framer-17d0fu9>.framer-37gnvt{flex:none;width:378px}
}
/* Phones: the same box collapsed to a 1px line under the buttons. Show the card, scaled to fit. */
@media (max-width:809.98px){
  .framer-xyX7m .framer-17d0fu9.framer-17d0fu9{flex:none;height:auto;width:100%;padding:32px 0 8px;align-self:stretch}
  .framer-xyX7m .framer-17d0fu9>.framer-37gnvt{flex:none;width:378px;zoom:.86}
}
@media (max-width:379.98px){.framer-xyX7m .framer-17d0fu9>.framer-37gnvt{zoom:.7}}

/* /application-received asks for "Martina Plantijn" and "Saans" by their plain names, which Framer never
   declared, so it fell back to Georgia and the system font (on the live site too). Point them at our files. */
@font-face{font-family:'Martina Plantijn';src:url(../fonts/MartinaPlantijn-Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Martina Plantijn';src:url(../fonts/MartinaPlantijn-Regular.woff2) format('woff2');font-weight:400 499;font-display:swap}
@font-face{font-family:'Martina Plantijn';src:url(../fonts/MartinaPlantijn-Medium.woff2) format('woff2');font-weight:500 900;font-display:swap}
@font-face{font-family:'Saans';src:url(../fonts/Saans-Light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Saans';src:url(../fonts/Saans-Regular.woff2) format('woff2');font-weight:380 450;font-display:swap}
@font-face{font-family:'Saans';src:url(../fonts/Saans-Medium.woff2) format('woff2');font-weight:451 599;font-display:swap}
@font-face{font-family:'Saans';src:url(../fonts/Saans-SemiBold.woff2) format('woff2');font-weight:600 699;font-display:swap}
@font-face{font-family:'Saans';src:url(../fonts/Saans-Bold.woff2) format('woff2');font-weight:700 899;font-display:swap}
@font-face{font-family:'Saans';src:url(../fonts/Saans-Heavy.woff2) format('woff2');font-weight:900;font-display:swap}

/* Headlines set at 65px or 48px on a 40px line in the Framer project (phone hero on /industries/ai,
   /industries/creator-economy, /industries/peptides, /creator-shield): the lines overlapped, on the live
   site too. Same size, line height opened up to 1.1 (Oct 30 fix). */
[style*="--framer-font-size:65px"][style*="--framer-line-height:40px"],
[style*="--framer-font-size:48px"][style*="--framer-line-height:40px"]{--framer-line-height:1.1em!important}