@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* Roadmap's existing tile, shared only by the four requested destinations. */
body>.header .header-cta.join-movement-tile,
body>.site-header>a.join-movement-tile{
 box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;
 width:auto;max-width:100%;min-width:0;min-height:45px;flex-shrink:0;
 padding:12px 19px;gap:16px;border:1px solid #ffffff50;border-radius:8px;
 background:transparent;color:#ffe430;font:400 14px/1.2 'DM Sans',Arial,sans-serif;
 letter-spacing:0;text-align:center;text-decoration:none;white-space:normal;overflow-wrap:anywhere;
}
body>.header .header-cta.join-movement-tile>span,
body>.site-header>a.join-movement-tile>span{margin:0;min-width:0;color:inherit}
body>.header .header-cta.join-movement-tile>.telegram-icon,
body>.site-header>a.join-movement-tile>.telegram-icon{display:block;flex:none;width:19px;height:19px;object-fit:contain;filter:none;opacity:1}
body>.header .header-cta.join-movement-tile:focus-visible,
body>.site-header>a.join-movement-tile:focus-visible{outline:2px solid #ffe430;outline-offset:6px}
body>.site-header>a.join-movement-tile{margin-left:auto}

/* Keep the established drawer placement on the three shared-header pages.
   Arcade retains its logo/back row and gives the new CTA its own phone row. */
@media(max-width:900px){
 body>.header .header-cta.join-movement-tile,
 body>.site-header>a.join-movement-tile{width:100%;min-height:48px;font-size:16px}
 body>.site-header:has(>.join-movement-tile){flex-wrap:wrap}
 body>.site-header>a.join-movement-tile{flex-basis:100%;margin-left:0}
}
@media(min-width:701px) and (max-width:900px){
 /* Match the drawer's 16px outer inset without moving Arcade's existing row. */
 body>.site-header>a.join-movement-tile{width:calc(100% + 24px);max-width:none;flex-basis:calc(100% + 24px);margin-inline:-12px}
}
@media(max-width:700px){
 body>.header .header-cta.join-movement-tile,
 body>.site-header>a.join-movement-tile{padding:7px 8px;gap:6px}
 body>.header .header-cta.join-movement-tile>.telegram-icon,
 body>.site-header>a.join-movement-tile>.telegram-icon{width:17px;height:17px}
}
@media(max-width:360px){
 body>.header .header-cta.join-movement-tile,
 body>.site-header>a.join-movement-tile{padding-inline:6px}
}