/* ════════════════════════════════════════════════════════
   TALARA · shared chrome (nav + footer) in the Cloud Paper
   language. Loaded LAST on every page that carries the site
   nav/footer markup, after home.css / pages.css / cloud.css,
   so it wins by order. Self-contained: own tokens, own font.
   Behaviour still comes from home.js (scrolled / on-dark /
   mobile menu); this sheet only restyles those states.
   ════════════════════════════════════════════════════════ */

:root {
  --cp-ink:   #091135;
  --cp-slate: #36394A;
  --cp-mist:  #B1BBCD;
  --cp-frost: #E1E9F0;
  --cp-wash:  #F5F3FF;
  --cp-blue:  #0D68CC;
  --cp-blue-deep: #0B62C2;
  --cp-blue-ring: #0F77FF;
  --cp-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cp-shadow-btn: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 2px rgba(9,17,53,0.16), 0 6px 14px rgba(13,104,204,0.24);
  /* the page content edge: the 1200 px container, or the gutter on narrow screens. The pill overhangs it by 22 px so the logo and the CTA sit exactly on the axis. */
  --cp-nav-pad: max(var(--pad-x), calc((100% - var(--maxw, 1200px)) / 2 - 22px));
}

/* ─── NAV ─── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: calc(84px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) calc(var(--cp-nav-pad) + env(safe-area-inset-right, 0px)) 0 calc(var(--cp-nav-pad) + env(safe-area-inset-left, 0px)); pointer-events: none; font-family: var(--cp-sans); letter-spacing: 0.004em; }
.nav__pill { pointer-events: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 58px; max-width: 2600px; margin: 13px auto; padding: 0 22px; border-radius: 0; background: transparent; border: 1px solid transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: max-width 1s var(--cp-ease), background 0.7s var(--cp-ease), border-color 0.7s ease, border-radius 1s var(--cp-ease), box-shadow 0.7s ease, padding 0.7s var(--cp-ease); }
.nav.scrolled .nav__pill, .nav.on-dark.scrolled .nav__pill { max-width: calc(var(--maxw, 1200px) + 44px); height: 58px; padding: 0 232px 0 22px; background: rgba(255,255,255,0.88); border-color: var(--cp-frost); border-radius: 12px; box-shadow: 0 1px 2px rgba(9,17,53,0.04), 0 12px 32px rgba(9,17,53,0.08); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }

.nav__logo, .nav.on-dark.scrolled .nav__logo { color: var(--cp-ink); display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 0; transition: color 0.3s ease; }
.nav__logo .wordmark { height: 13px; width: auto; display: block; }
.nav__menu { display: flex; align-items: center; gap: 4px; justify-self: center; }
.nav__item { position: relative; }
.nav__link, .nav.on-dark.scrolled .nav__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--cp-sans); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--cp-slate); padding: 10px 12px; border-radius: 8px; transition: color 0.2s ease, background 0.2s ease; white-space: nowrap; }
.nav__link:hover, .nav.on-dark.scrolled .nav__link:hover { color: var(--cp-ink); background: var(--cp-wash); }
.nav__caret { width: 8px; height: 8px; opacity: 0.6; transition: transform 0.3s var(--cp-ease); }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

.nav__actions { pointer-events: auto; position: absolute; right: calc(var(--cp-nav-pad) + 22px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; }
.nav__cta, .nav.on-dark .nav__cta { display: inline-flex; align-items: center; height: 44px; font-family: var(--cp-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.004em; padding: 0 16px; line-height: 1; border-radius: 8px; background: var(--cp-blue); color: #fff; box-shadow: var(--cp-shadow-btn); transition: background 0.18s ease, box-shadow 0.24s var(--cp-ease); white-space: nowrap; }
.nav__cta:hover, .nav.on-dark .nav__cta:hover { background: var(--cp-blue-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 1px var(--cp-blue-ring), 0 8px 20px rgba(13,104,204,0.3); }
.nav__signin, .nav.on-dark.scrolled .nav__signin { display: inline-flex; align-items: center; height: 44px; font-family: var(--cp-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.004em; padding: 0 16px; line-height: 1; border-radius: 8px; background: #fff; border: 1px solid var(--cp-frost); color: var(--cp-ink); transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease; white-space: nowrap; }
.nav__signin:hover, .nav.on-dark.scrolled .nav__signin:hover { border-color: var(--cp-mist); color: var(--cp-ink); }

/* Over a dark hero, before the pill appears: white text, glass sign-in, blue CTA unchanged */
.nav.on-dark:not(.scrolled) .nav__logo, .nav.on-dark:not(.scrolled) .nav__link { color: #fff; }
.nav.on-dark:not(.scrolled) .nav__link:hover { color: #fff; background: rgba(255,255,255,0.14); }
.nav.on-dark:not(.scrolled) .nav__signin { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.35); color: #fff; }
.nav.on-dark:not(.scrolled) .nav__signin:hover { border-color: #fff; color: #fff; }

/* dropdown panel */
.nav__drop { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 250px; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--cp-frost); border-radius: 12px; padding: 8px; box-shadow: 0 2px 4px rgba(9,17,53,0.04), 0 24px 56px rgba(9,17,53,0.14); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, transform 0.3s var(--cp-ease), visibility 0.22s; }
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav__drop a { display: block; padding: 10px 12px; border-radius: 8px; font-family: var(--cp-sans); font-size: 14px; line-height: 20px; color: var(--cp-slate); transition: background 0.16s ease, color 0.16s ease; }
.nav__drop a:hover { background: var(--cp-wash); color: var(--cp-ink); }
.nav__drop a b { display: block; color: var(--cp-ink); font-weight: 600; }
.nav__drop a span { font-size: 12px; line-height: 16px; color: var(--cp-slate); }
.nav__drop--2col { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 8px; width: 520px; }
@media (max-width: 1080px) { .nav__menu { display: none; } }

/* ─── Mobile nav ─── */
.nav__burger { display: none; pointer-events: auto; position: absolute; right: var(--cp-nav-pad); top: 50%; transform: translateY(-50%); width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: #fff; border: 1px solid var(--cp-frost); border-radius: 10px; cursor: pointer; padding: 0; z-index: 260; box-shadow: 0 1px 2px rgba(9,17,53,0.05); }
.nav__burger span, .nav.on-dark .nav__burger span, .nav__burger.is-open span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--cp-ink); transition: transform 0.3s var(--cp-ease), opacity 0.2s ease; }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.navmob { position: fixed; inset: 0; z-index: 10000; pointer-events: auto; background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: calc(6rem + env(safe-area-inset-top, 0px)) var(--pad-x) calc(3rem + env(safe-area-inset-bottom, 0px)); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 0.3s ease, transform 0.35s var(--cp-ease), visibility 0.3s; }
.navmob.is-open { opacity: 1; visibility: visible; transform: none; }
.navmob__close { position: absolute; top: calc(1.2rem + env(safe-area-inset-top, 0px)); right: var(--pad-x); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--cp-frost); border-radius: 10px; color: var(--cp-ink); font-size: 28px; line-height: 1; cursor: pointer; }
.navmob__menu { display: flex; flex-direction: column; }
.navmob__menu a { font-family: var(--cp-sans); font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: 0.016em; color: var(--cp-ink); padding: 8px 0; min-height: 44px; transition: color 0.2s ease; }
.navmob__menu a:hover, .navmob__menu a:active { color: var(--cp-blue); }
.navmob__cta { align-self: flex-start; margin-top: 16px; height: 48px; padding: 0 24px; font-family: var(--cp-sans); font-size: 16px; font-weight: 500; border-radius: 8px; }
.navmob__cta.btn--solid { background: var(--cp-blue); color: #fff; box-shadow: var(--cp-shadow-btn); }
.navmob__cta.btn--ghost { background: #fff; color: var(--cp-ink); border: 1px solid var(--cp-frost); }
.navmob__cta + .navmob__cta { margin-top: 0; }
.nav:has(.navmob.is-open) { z-index: 10001; }
@media (max-width: 1080px) {
  .nav__actions { display: none; }
  .nav__burger { display: flex; }
  .nav__pill, .nav.scrolled .nav__pill, .nav.on-dark.scrolled .nav__pill { max-width: none !important; height: 58px; margin: 13px 0; padding: 0 !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav::after, .nav.on-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s var(--cp-ease); background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--cp-frost); }
  .nav.scrolled::after { opacity: 1; }
  .nav.on-dark.scrolled .nav__logo { color: var(--cp-ink); }
}
@media (min-width: 1081px) { .navmob { display: none; } }

/* ─── FOOTER ─── */
.footer { position: relative; z-index: 1; background: #fff; color: var(--cp-ink); padding: 48px var(--pad-x) 32px; border-top: 1px solid var(--cp-frost); text-shadow: none; font-family: var(--cp-sans); letter-spacing: 0.004em; }
.footer__top { max-width: var(--maxw, 1200px); margin: 0 auto; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--cp-frost); }
.footer__brand .wordmark { height: 13px; width: auto; color: var(--cp-ink); display: block; margin-bottom: 16px; }
.footer__tag { font-size: 14px; line-height: 20px; color: var(--cp-slate); max-width: 26ch; }
.footer__col h4 { font-family: var(--cp-sans); font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-slate); margin-bottom: 12px; font-weight: 600; }
.footer__col a { display: block; font-size: 14px; line-height: 20px; color: var(--cp-slate); padding: 6px 0; transition: color 0.2s ease; }
.footer__col a:hover { color: var(--cp-blue); }
.footer__bottom { max-width: var(--maxw, 1200px); margin: 24px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__bottom span, .footer__bottom a, .footer__mcp { font-family: var(--cp-sans); font-size: 12px; line-height: 16px; letter-spacing: 0.004em; color: var(--cp-slate); }
.footer__bottom a:hover { color: var(--cp-blue); }
.footer__legal { display: inline-flex; gap: 20px; }
@media (max-width: 920px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 24px 16px; } .footer__bottom { gap: 12px; } }

/* ════════════════════════════════════════════════════════
   MODAL · FORM · POPUP, shared markup + home.js on every page
   ════════════════════════════════════════════════════════ */
.modal { position: fixed; inset: 0; z-index: 360; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(9,17,53,0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.35s var(--cp-ease); }
.modal[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.modal__card { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 48px); overflow-y: auto; background: #fff; border: 1px solid var(--cp-frost); border-radius: 16px; padding: 28px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 0 0 1px rgba(9,17,53,0.04), 0 2px 4px rgba(9,17,53,0.06), 0 12px 28px rgba(9,17,53,0.14), 0 48px 96px rgba(9,17,53,0.28); color: var(--cp-ink); transform: translateY(18px) scale(0.965); transition: transform 0.5s var(--cp-ease); }
.modal[aria-hidden="false"] .modal__card { transform: none; }
.modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cp-frost); background: #fff; color: var(--cp-slate); border-radius: 10px; font-size: 22px; line-height: 1; cursor: pointer; transition: border-color 0.2s ease; }
.modal__close:hover { border-color: var(--cp-mist); }
.modal__title { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: 0.014em; margin: 12px 0 8px; color: var(--cp-ink); padding-right: 48px; }
.modal__sub { font-size: 14px; line-height: 20px; color: var(--cp-slate); margin-bottom: 20px; }
html.modal-open, body.modal-open { overflow: hidden; }

.form { display: grid; gap: 16px; width: 100%; text-align: left; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__field { display: grid; gap: 6px; min-width: 0; }
.form__field label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.004em; color: var(--cp-slate); }
.form__field input { width: 100%; min-width: 0; min-height: 44px; font-family: var(--cp-sans); font-size: 16px; line-height: 24px; color: var(--cp-ink); background: #fff; border: 1px solid var(--cp-frost); border-radius: 8px; padding: 10px 12px; outline: none; box-shadow: inset 0 1px 2px rgba(9,17,53,0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; }
.form__field input::placeholder { color: var(--cp-mist); }
.form__field input:focus { border-color: var(--cp-blue-ring); box-shadow: 0 0 0 1px var(--cp-blue-ring), 0 0 0 5px rgba(12,43,100,0.10); }
.form__field input.error { border-color: #C5394E; }
.form__error { font-size: 14px; line-height: 20px; color: #B32E42; min-height: 20px; margin: -6px 0; }
.form__submit { justify-content: center; width: 100%; position: relative; min-height: 48px; }
.form__btn-loading { display: none; }
.form__submit.is-loading .form__btn-text { visibility: hidden; }
.form__submit.is-loading .form__btn-loading { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; }
.form__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.form__note { font-size: 12px; line-height: 16px; text-align: center; color: var(--cp-slate); }

.popup { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(9,17,53,0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.popup[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.popup__card { background: #fff; border: 1px solid var(--cp-frost); border-radius: 16px; max-width: 420px; width: 100%; padding: 40px 32px 32px; text-align: center; display: grid; gap: 12px; justify-items: center; box-shadow: 0 12px 28px rgba(9,17,53,0.14), 0 48px 96px rgba(9,17,53,0.28); transform: translateY(20px) scale(0.97); transition: transform 0.45s var(--cp-ease); }
.popup[aria-hidden="false"] .popup__card { transform: none; }
.popup__title { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: 0.014em; }
.popup__body { font-size: 16px; line-height: 24px; color: var(--cp-slate); max-width: 300px; }
.popup__close { margin-top: 8px; }


/* buttons + eyebrow inside the modal/popup: Cloud Paper regardless of the page's own .btn */
.modal, .popup { font-family: var(--cp-sans); letter-spacing: 0.004em; }
.modal .btn, .popup .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 8px; border: 1px solid transparent; font-family: var(--cp-sans); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0.008em; background: var(--cp-blue); color: #fff; box-shadow: var(--cp-shadow-btn); transition: background 0.18s ease, box-shadow 0.24s var(--cp-ease); }
.modal .btn:hover, .popup .btn:hover { background: var(--cp-blue-deep); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 1px var(--cp-blue-ring), 0 8px 20px rgba(13,104,204,0.3); }
.modal .kicker { font-family: var(--cp-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.004em; text-transform: none; color: var(--cp-slate); display: block; }
.modal .kicker::before { display: none; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
/* explicit faces: home.css sets Fraunces on titles and mono uppercase on labels; the shared modal is Inter throughout */
.modal__title, .popup__title { font-family: var(--cp-sans); }
.modal__sub, .popup__body, .form__note, .form__error { font-family: var(--cp-sans); }
.form__field label { font-family: var(--cp-sans); text-transform: none; letter-spacing: 0.004em; }
.form__field input { font-family: var(--cp-sans); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* textarea in the pricing lead modals (pricing.css styles it dark) */
.form__field textarea { width: 100%; min-width: 0; min-height: 96px; font-family: var(--cp-sans); font-size: 16px; line-height: 24px; color: var(--cp-ink); background: #fff; border: 1px solid var(--cp-frost); border-radius: 8px; padding: 10px 12px; outline: none; resize: vertical; box-shadow: inset 0 1px 2px rgba(9,17,53,0.04); -webkit-backdrop-filter: none; backdrop-filter: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form__field textarea::placeholder { color: var(--cp-mist); }
.form__field textarea:focus { border-color: var(--cp-blue-ring); background: #fff; box-shadow: 0 0 0 1px var(--cp-blue-ring), 0 0 0 5px rgba(12,43,100,0.10); }
.form__optional { font-weight: 400; opacity: 0.7; text-transform: none; }