/* ==========================================================================
   Codefi — shared styles (nav, footer, buttons, sections used on many pages)
   Breakpoints match the Framer site:  desktop >= 1200px · tablet 810–1199px · phone < 810px
   ========================================================================== */

:root {
  --green: #6aa23c;
  --green-dark: #315b10;
  --teal: #357c7a;
  --teal-ink: #285757;
  --orange: #d83b02;
  --orange-hover: #9e2c03;
  --lime: #d4ed71;          /* brand guide "Lime Green" (Framer token had #d5ed71) */
  --ink: #050505;
  --ink-2: #141414;
  --ink-3: #242424;
  --gray: #585858;
  --slate: #465455;
  --mint: #d9eceb;
  --chip: #e0e0e0;
  --line: #cccccc;
  --card: rgba(252, 252, 252, 0.95);
  --white: #ffffff;

  --f-body: "Lato", system-ui, sans-serif;
  --f-head: "Montserrat", system-ui, sans-serif;
  --f-inter: "Inter", system-ui, sans-serif;

  --shadow-card: rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px,
                 rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px,
                 rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px;
  --ease: cubic-bezier(0.44, 0, 0.56, 1);
  /* OpenType features Framer applies to Inter text styles (no visible effect on Lato/Montserrat) */
  --inter-features: "blwf", "cv03", "cv04", "cv09", "cv11";
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.5;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Framer renders all text this way */ }
/* Slide-in elements start up to 150px off to the side; clip them (like Framer) so phones never get a wider-than-screen page.
   `clip` (not `hidden`) keeps position: sticky working inside. */
#main { overflow-x: clip; }
#main:focus { outline: none; }
/* Keyboard users: first Tab shows this link above the header; it stays off-screen otherwise. */
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10000; padding: 10px 18px; border-radius: 400px;
             background: var(--ink); color: var(--white); font: 700 15px/1.2 var(--f-body); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.green { color: var(--green); }
.lime { color: var(--lime); }
.ink { color: var(--ink-2); }
.only-tablet { display: none; }
.only-phone { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px; border-radius: 23px;
  font: 400 15px/21px var(--f-body); color: var(--white); white-space: nowrap;
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn__icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex: none; }
.icon-arrow { width: 20px; height: 20px; fill: currentColor; transform: rotate(-45deg); }
.btn--orange { background: var(--orange); }
.btn--orange:hover { background: var(--orange-hover); }
.btn--dark { background: var(--ink-3); padding: 10px 15px; font-size: 14px; line-height: 19.6px; }
.btn--dark:hover { background: var(--ink); }
.btn--outline { background: transparent; padding: 10px 15px; font-size: 14px; line-height: 19.6px; box-shadow: inset 0 0 0 1px var(--chip); }
.btn--outline:hover { box-shadow: inset 0 0 0 1px var(--chip), 0 8px 20px 0 rgba(212, 237, 114, 0.54); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 80px; padding: 0 40px;
  display: flex; justify-content: center;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px);
}
.nav__inner { position: relative; width: 100%; max-width: 1200px; height: 80px; display: flex; align-items: center; justify-content: space-between; }
.nav__logo img { width: 150px; height: 52px; object-fit: contain; }
.nav__menu { display: flex; align-items: center; gap: 12px; }
.nav__link { display: flex; padding: 8px; font: 400 16px/17.6px var(--f-body); letter-spacing: -0.02em; color: var(--ink); text-align: center; transition: color .2s var(--ease); }
.nav__link:hover { color: var(--green); }
.nav__label--tablet { display: none; }
.nav__burger, .nav__panel { display: none; }

/* ---------- Subscribe CTA band (shared) ---------- */
.cta-band { background: var(--teal); padding: 100px 40px; display: flex; justify-content: center; overflow: hidden; }
.cta-band__inner { width: 100%; max-width: 1000px; min-height: 145px; display: flex; align-items: center; justify-content: space-between; }
.cta-band__title { font: 600 44px/52.8px var(--f-head); letter-spacing: -0.04em; color: var(--white); }
.cta-band__side { width: 400px; display: flex; flex-direction: column; align-items: flex-start; gap: 19px; }
.cta-band__side p { font: 400 18px/27px var(--f-body); color: var(--white); }

/* ---------- Footer ---------- */
.footer { padding: 80px 40px 40px; display: flex; justify-content: center; background: var(--white); }
.footer__inner { width: 100%; max-width: 1200px; display: flex; flex-direction: column; }
.footer__top { display: flex; flex-direction: column; gap: 32px; }
.footer__brand { display: flex; justify-content: space-between; align-items: flex-start; }
.footer__logo img { width: 111px; height: 45px; object-fit: contain; }
.footer__tagline { font: 500 24px/28.8px var(--f-head); letter-spacing: -0.02em; color: var(--ink); text-align: right; }
.cowork { background: var(--teal); border-radius: 16px; padding: 22px 20px 20px; display: flex; align-items: center; gap: 8px; }
.cowork__text { flex: 1; }
.cowork__title { font: 500 22px/28.6px var(--f-head); letter-spacing: -0.02em; color: var(--white); }
.cowork__sub { font: 400 16px/24px var(--f-body); color: #f0f0f0; }
.cowork__btns { display: flex; align-items: center; gap: 10px; }
.footer__cols { display: flex; gap: 30px; padding: 40px 0 20px; }
.footer__col { width: 216px; display: flex; flex-direction: column; gap: 16px; }
.footer__heading { font: 500 22px/28.6px var(--f-head); letter-spacing: -0.02em; color: var(--ink); }
.footer__links { display: flex; flex-direction: column; gap: 12px; font: 400 14px/21px var(--f-body); }
.footer__links li { display: flex; flex-direction: column; align-items: flex-start; }
.footer__links a { color: rgba(41, 41, 41, 0.8); transition: color .2s var(--ease); }
.footer__links a:hover { color: var(--green); }
.footer__links a.is-current { color: var(--green-dark); } /* live site marks the current page's footer link */
.footer__sub { color: var(--gray); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.footer__copy { flex: 1; white-space: pre-wrap; font: 400 14px/21px var(--f-body); color: var(--ink); }
.footer__pipe { color: var(--chip); }
.footer__copy a { color: var(--green); }
.footer__cookies { flex: none; white-space: nowrap; opacity: .56; font: 400 16px/normal sans-serif; color: #333; }

/* ---------- FAQ accordion (shared; render with ui.faqList(items)) ---------- */
.faq-list { display: flex; flex-direction: column; gap: 20px; }
.qa { background: var(--white); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); padding: 0 30px; display: flex; gap: 20px; }
.qa__num { flex: none; padding: 20px 0; }
.qa__num span { display: block; background: var(--teal); border-radius: 10px; padding: 5px 10px; font: 400 16px/22.4px var(--f-body); letter-spacing: -0.02em; color: var(--white); }
.qa__content { flex: 1; min-width: 0; }
.qa__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; text-align: left; cursor: pointer; }
.qa__q h3 { flex: 1; font: 700 20px/26px var(--f-body); letter-spacing: -0.02em; color: var(--ink-2); }
.qa__icon { flex: none; width: 24px; height: 24px; fill: var(--teal-ink); }
.qa__icon .v { transition: opacity .25s var(--ease); }
.qa.is-open .qa__icon .v { opacity: 0; }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease), opacity .4s var(--ease); opacity: 0; }
.qa.is-open .qa__a { grid-template-rows: 1fr; opacity: 1; }
.qa__a > div { overflow: hidden; }
.qa__a-inner { padding: 0 20px 30px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.qa__a p { font: 400 16px/24px var(--f-body); color: var(--ink-3); }
.qa__a a:not(.btn) { color: var(--green); }

/* ---------- Cookie notice (stands in for Framer's built-in banner) ---------- */
.cookie { position: fixed; right: 20px; bottom: 20px; z-index: 100; width: 360px; }
.cookie[hidden] { display: none; }
.cookie__box { background: var(--ink-3); border-radius: 14px; box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px inset; padding: 20px; display: flex; align-items: center; gap: 20px; }
.cookie__box p { font: 400 14px/21px var(--f-inter); color: var(--white); }
.cookie__ok { flex: none; background: #eee; color: #444; border-radius: 8px; padding: 10px; font: 400 14px/14px var(--f-inter); }
.cookie__ok:hover { background: #e2e2e2; }

/* ---------- Scroll reveal (replaces Framer "appear" effects) ---------- */
.js [data-reveal] { opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal="left"]  { transform: translateX(-150px); }
.js [data-reveal="right"] { transform: translateX(150px); }
.js [data-reveal="card"]  { transform: perspective(1200px) translateX(-50px); }
.js [data-reveal="up"]    { transform: translateY(40px); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199.98px) {
  .nav { padding: 0 30px; }
  .nav__logo img { width: 121px; height: 49px; }
  .nav__menu { gap: 13px; }
  .nav__link { font-size: 13px; line-height: 14.3px; }
  .nav__label { display: none; }
  .nav__label--tablet { display: inline; }
  .nav__cta .btn__icon { display: none; }
  .only-tablet { display: inline; }
  .not-tablet { display: none; }

  .cta-band { padding: 80px 30px; }
  .cta-band__inner { min-height: 141px; }
  .cta-band__title { font-size: 38px; line-height: 45.6px; }
  .cta-band__side { width: 400px; }
  .cta-band__side p { font-size: 17px; line-height: 25.5px; }

  .footer { padding: 60px 30px 30px; }
  .footer__inner { gap: 40px; }
  .footer__tagline { font-size: 20px; line-height: 26px; letter-spacing: -0.02em; }
  .cowork__title { font-size: 20px; line-height: 26px; }
  .cowork__sub { font-size: 15px; line-height: 22.5px; }
  .footer__links { font-size: 13px; line-height: 19.5px; }
  .footer__cols { flex-wrap: wrap; padding: 20px 0; }
  .footer__col { width: 230px; }
  .footer__heading { font-size: 20px; line-height: 26px; }
  .footer__copy { font-size: 13px; line-height: 19.5px; }
  .qa__a p { font-size: 15px; line-height: 22.5px; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 809.98px) {
  .nav { height: 64px; padding: 0 40px; background: var(--white); }
  .nav__inner { height: auto; min-height: 64px; flex-wrap: wrap; align-content: flex-start; }
  .nav__logo { order: 1; height: 64px; display: flex; align-items: center; }
  .nav__logo img { width: 109px; height: 38px; transition: width .4s var(--ease), height .4s var(--ease); }
  .nav__burger { order: 2; display: block; position: relative; z-index: 2; width: 40px; height: 40px; border-radius: 50px; background: var(--white); }
  .nav__bar { position: absolute; left: 10px; width: 20px; height: 2px; border-radius: 10px; background: var(--ink-2); transition: transform .4s var(--ease), opacity .3s var(--ease), top .4s var(--ease); }
  .nav__bar--top { top: 13px; }
  .nav__bar--mid { top: 19px; }
  .nav__bar--bot { top: 25px; }
  .nav__menu, .nav__cta { order: 3; width: 100%; display: none; }
  .nav__menu { flex-direction: column; gap: 5px; padding-top: 12px; }
  .nav__link { width: 100%; height: 50px; justify-content: center; align-items: center; font-size: 16px; line-height: 17.6px; }
  .nav__label { display: inline; }
  .nav__label--tablet { display: none; }
  .nav__cta { order: 4; justify-content: center; padding: 20px 0 40px; }
  .nav__cta .btn__icon { display: flex; }
  /* Morphing background: a dark circle behind the burger that grows into the white menu card */
  .nav__panel {
    display: block; position: absolute; z-index: 0; top: 12px; right: 40px; width: 40px; height: 40px;
    border-radius: 50px; background: var(--ink-2);
    transition: top .4s var(--ease), right .4s var(--ease), width .4s var(--ease), height .4s var(--ease), border-radius .4s var(--ease), background-color .4s var(--ease);
  }
  .nav__inner { z-index: 1; }
  .nav.is-open { height: auto; background: transparent; }
  .nav.is-open .nav__panel { top: -10px; right: -10px; width: calc(100% + 20px); height: calc(100% + 20px); border-radius: 24px; background: var(--white); }
  .nav.is-open .nav__menu, .nav.is-open .nav__cta { display: flex; }
  .nav.is-open .nav__logo img { width: 150px; height: 53px; }
  .nav.is-open .nav__bar--top { top: 19px; transform: rotate(45deg); }
  .nav.is-open .nav__bar--mid { opacity: 0; }
  .nav.is-open .nav__bar--bot { top: 19px; transform: rotate(-45deg); }

  .cta-band { padding: 60px 20px; }
  .cta-band__inner { flex-direction: column; justify-content: flex-start; gap: 20px; text-align: center; min-height: 0; }
  .cta-band__title { font-size: 30px; line-height: 36px; letter-spacing: -0.09em; }
  .cta-band__side { width: 100%; max-width: 400px; align-items: center; gap: 19px; }
  .cta-band__side p { font-size: 16px; line-height: 24px; }

  .footer { padding: 40px 20px; }
  .footer__inner { gap: 40px; }
  .footer__brand { flex-direction: column; gap: 24px; }
  .footer__tagline { font-size: 18px; line-height: 23.4px; text-align: left; }
  .cowork { flex-direction: column; gap: 12px; }
  .cowork__text, .cowork__btns { width: 100%; }
  .cowork__title { font-size: 18px; line-height: 23.4px; }
  .cowork__sub { font-size: 14px; line-height: 21px; }
  .footer__links { font-size: 12px; line-height: 18px; }
  .footer__cols { gap: 24px; padding: 0; }
  .footer__col { width: 46.07%; gap: 10px; }
  .footer__heading { font-size: 18px; line-height: 23.4px; }
  .footer__copy { font-size: 12px; line-height: 18px; }
  .footer__links { gap: 12px; }
  .footer__col:first-child .footer__links { gap: 13px; }
  .footer__links li { gap: 5px; }
  .footer__links a, .footer__sub { min-height: 30px; display: flex; align-items: center; }
  .footer__sub { gap: 0.25em; }
  .footer__col--top .footer__links a { align-items: flex-start; }
  br.only-phone { display: inline; }

  .cookie { left: 20px; right: 20px; width: auto; }
  .qa__a p { font-size: 14px; line-height: 21px; }
  .only-tablet { display: none; }
  .not-tablet { display: inline; }
}