/* Mailivy — base stylesheet. Component styling lives inline in the markup (as in the
   design source); this file holds fonts, keyframes, and the few pieces that need
   selectors: hover/focus states (generated at build), modal, menu, legal, print. */

@font-face{font-family:'Funnel Display';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-display-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:'Funnel Display';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-display-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}
@font-face{font-family:'Funnel Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-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:'Funnel Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/funnel-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}

body{margin:0;background:#FFFFFF;color:#0E0F13;font-family:'Funnel Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:#0E0F13;text-decoration:none}
a:hover{color:#2B3BFF}
input::placeholder{color:#9AA0AE}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
button{-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed!important}
:focus-visible{outline:2.5px solid #2B3BFF;outline-offset:2px;border-radius:6px}
input:focus-visible{outline:0}
::selection{background:#FFD23F;color:#0E0F13}

@keyframes wordUp{from{opacity:0;transform:translateY(.35em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cardUp{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:none}}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(-1.5deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(2.5deg)}50%{transform:translateY(11px) rotate(4deg)}}
@keyframes chipIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes arrive{from{max-height:0;opacity:0;padding-top:0;padding-bottom:0}to{max-height:100px;opacity:1}}
@keyframes flash{0%{background:#D7DCFF}100%{background:#F5F6FF}}
@keyframes type{from{max-width:0}to{max-width:300px}}
@keyframes blink{50%{opacity:0}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,210,63,.8)}100%{box-shadow:0 0 0 9px rgba(255,210,63,0)}}
@keyframes glow{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:.95;transform:translateX(-50%) scale(1.1)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes drift{from{background-position:0 0}to{background-position:28px 28px}}
@keyframes blocked{0%,45%{transform:none;opacity:1}60%{transform:translateX(36px);opacity:0}80%{transform:translateX(-12px);opacity:0}100%{transform:none;opacity:1}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Floating hero chips only on very wide screens (design: vw >= 1440). */
.wide-only{display:none}
@media (min-width:1440px){.wide-only{display:block}}

/* Scroll-driven reveal fallback (browsers without animation-timeline). */
.sv-wait{animation-play-state:paused!important}

/* Header: compact menu on small screens. */
.menu-btn{display:none}
.mobile-menu{display:none}
@media (max-width:760px){
  .site-nav,.hdr-signin{display:none!important}
  .hdr-left{gap:0!important}
  .menu-btn{display:grid}
  .site-header{flex-wrap:nowrap!important}
  .mobile-menu.open{display:flex;animation:menuIn .22s cubic-bezier(.2,.7,.2,1) both}
}
.site-nav a:hover{color:#0E0F13!important}

/* Buttons with a pending state. */
.spinner{width:18px;height:18px;border-radius:50%;border:2.2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
.btn-busy{pointer-events:none;opacity:.85}
.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
.err-box{display:flex;gap:10px;align-items:flex-start;animation:fadeUp .3s both}
.field-invalid{border-color:#E5484D!important;box-shadow:0 0 0 4px rgba(229,72,77,.12)!important}

/* Modal alert. */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(14,15,19,.42);backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2);display:grid;place-items:center;padding:20px;animation:overlayIn .25s ease both}
.modal-card{position:relative;width:100%;max-width:460px;background:#fff;border-radius:20px;box-shadow:0 40px 90px -30px rgba(14,15,19,.55);overflow:hidden;animation:modalIn .45s cubic-bezier(.2,.7,.2,1) both}
.modal-card:focus{outline:0}
body.modal-open{overflow:hidden}

/* FAQ accordion. */
.acc-icon{transition:transform .25s}
.acc-open .acc-icon{transform:rotate(45deg)}
.acc-a{animation:fadeUp .35s both}

/* Legal documents. */
.legal-list{margin:0;padding:0 0 0 2px;list-style:none;display:flex;flex-direction:column;gap:10px}
.legal-list li{position:relative;padding-left:22px;font-size:17px;line-height:1.65;color:#2A2E38}
.legal-list li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:2px;background:#2B3BFF}
.legal-table-wrap{overflow-x:auto;border:1px solid #E4E6EB;border-radius:14px}
.legal-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:520px}
.legal-table th{background:#F7F8FA;text-align:left;font-weight:700;padding:12px 16px;border-bottom:1px solid #E4E6EB}
.legal-table td{padding:12px 16px;border-top:1px solid #EEF0F3;vertical-align:top;color:#2A2E38}
.legal-table tr:first-child td{border-top:0}
.legal-body a{color:#2B3BFF;font-weight:600}
.legal-body a:hover{text-decoration:underline}
.toc{max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin}
.toc a.active{background:#F2F3F6;color:#0E0F13!important}
.toc a.active span{color:#2B3BFF!important}
@media (max-width:820px){
  .toc{position:static!important;max-height:none;max-width:none!important;flex-basis:100%!important}
  .toc-links{display:grid!important;grid-template-columns:1fr;gap:2px}
}

/* Help centre. */
.help-results-anchor{scroll-margin-top:96px}
mark{background:#FFF3C4;color:inherit;border-radius:3px;padding:0 1px}

/* Reduced motion: keep everything visible and still. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero-window{transform:none!important}
}

/* Print / "Download PDF" for legal pages. */
@media print{
  .site-header,.site-footer,.toc,.no-print,.mobile-menu{display:none!important}
  body{background:#fff}
  .print-full{max-width:none!important;padding:0!important}
  section{break-inside:avoid-page}
  *{animation:none!important;box-shadow:none!important}
  a{color:#0E0F13!important}
}

/* Accordion buttons are also rendered client-side, so their hover lives here. */
@media (hover:hover){.acc-btn:hover{color:#2B3BFF!important}}
.skip:focus{left:8px!important}
@media (max-width:370px){.hdr-cta{display:none!important}}
@media (max-width:760px){.hdr-cta{height:38px!important;padding:0 14px!important;font-size:14px!important}}
input.field-invalid,input.field-invalid:focus{border-color:#E5484D!important;box-shadow:0 0 0 4px rgba(229,72,77,.14)!important}

/* Generated from style-hover / style-focus */
@media (hover:hover){
.h0:hover:not(:disabled){background:#F2F3F6!important}
.h1:hover:not(:disabled){background:#2B3BFF!important;color:#fff!important}
.h2:hover:not(:disabled){background:#1A22B8!important;transform:translateY(-2px)!important;box-shadow:0 16px 30px -12px rgba(43,59,255,.9)!important}
.h3:hover:not(:disabled){background:#fff!important}
.h4:hover:not(:disabled){background:#0E0F13!important;color:#fff!important}
.h5:hover:not(:disabled){background:#fff!important;color:#0E0F13!important}
.h6:hover:not(:disabled){transform:translateY(-2px)!important;box-shadow:0 14px 28px -14px rgba(0,0,0,.45)!important}
.h7:hover:not(:disabled){background:#FAFAFC!important}
.h8:hover:not(:disabled){text-decoration:underline!important}
.h9:hover:not(:disabled){border-color:#2B3BFF!important;transform:translateY(-3px)!important;box-shadow:0 16px 30px -20px rgba(43,59,255,.6)!important}
.ha:hover:not(:disabled){background:rgba(255,255,255,.6)!important}
.hb:hover:not(:disabled){background:#F2F3F6!important;color:#0E0F13!important}
.hc:hover:not(:disabled){border-color:#0E0F13!important}
.he:hover:not(:disabled){background:#1A22B8!important;transform:translateY(-1px)!important}
.hf:hover:not(:disabled){border-color:#0E0F13!important;color:#0E0F13!important}
.hg:hover:not(:disabled){background:#1A22B8!important;color:#fff!important}
}
.fd:focus{border-color:#2B3BFF!important;box-shadow:0 0 0 4px rgba(43,59,255,.14)!important}